Name of Slides for Draws
- Basic
- Custom Placement
- Extra Actions
- Render in current dom
- Submit form in drawer
- Preview drawer
- Multi-level drawer
- Presetted size
- API
Drawer
A panel which slides in from the edge of the screen.
When To Use#
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
-
Use a Form to create or edit a set of information.
-
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
-
When the same Form is needed in multiple places.
Examples
import React, { useState } from 'react' ; import { Drawer, Button } from 'antd' ; const App: React. FC = ( ) => { const [visible, setVisible] = useState ( false ) ; const showDrawer = ( ) => { setVisible ( true ) ; } ; const onClose = ( ) => { setVisible ( false ) ; } ; return ( < > < Button type = "primary" onClick = {showDrawer} > Open </ Button > < Drawer title = "Basic Drawer" placement = "right" onClose = {onClose} visible = {visible} > <p > Some contents... </p > <p > Some contents... </p > <p > Some contents... </p > </ Drawer > </ > ) ; } ; ReactDOM. render ( < App /> , mountNode) ; Use a form in Drawer with a submit button.
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Space } from 'antd' ; import { PlusOutlined } from '@ant-design/icons' ; const { Option } = Select; class DrawerForm extends React.Component { state = { visible: false } ; showDrawer = ( ) => { this . setState ( { visible: true , } ) ; } ; onClose = ( ) => { this . setState ( { visible: false , } ) ; } ; render ( ) { return ( < > < Button type = "primary" onClick = { this .showDrawer} icon = { < PlusOutlined /> } > New account </ Button > < Drawer title = "Create a new account" width = { 720 } onClose = { this .onClose} visible = { this .state.visible} bodyStyle = { { paddingBottom: 80 } } extra = { < Space > < Button onClick = { this .onClose} > Cancel </ Button > < Button onClick = { this .onClose} type = "primary" > Submit </ Button > </ Space > } > < Form layout = "vertical" hideRequiredMark > < Row gutter = { 16 } > < Col span = { 12 } > < Form.Item name = "name" label = "Name" rules = { [ { required: true , message: 'Please enter user name' } ] } > < Input placeholder = "Please enter user name" /> </ Form.Item > </ Col > < Col span = { 12 } > < Form.Item name = "url" label = "Url" rules = { [ { required: true , message: 'Please enter url' } ] } > < Input style = { { width: '100%' } } addonBefore = "http://" addonAfter = ".com" placeholder = "Please enter url" /> </ Form.Item > </ Col > </ Row > < Row gutter = { 16 } > < Col span = { 12 } > < Form.Item name = "owner" label = "Owner" rules = { [ { required: true , message: 'Please select an owner' } ] } > < Select placeholder = "Please select an owner" > < Option value = "xiao" > Xiaoxiao Fu </ Option > < Option value = "mao" > Maomao Zhou </ Option > </ Select > </ Form.Item > </ Col > < Col span = { 12 } > < Form.Item name = "type" label = "Type" rules = { [ { required: true , message: 'Please choose the type' } ] } > < Select placeholder = "Please choose the type" > < Option value = "private" > Private </ Option > < Option value = "public" > Public </ Option > </ Select > </ Form.Item > </ Col > </ Row > < Row gutter = { 16 } > < Col span = { 12 } > < Form.Item name = "approver" label = "Approver" rules = { [ { required: true , message: 'Please choose the approver' } ] } > < Select placeholder = "Please choose the approver" > < Option value = "jack" > Jack Ma </ Option > < Option value = "tom" > Tom Liu </ Option > </ Select > </ Form.Item > </ Col > < Col span = { 12 } > < Form.Item name = "dateTime" label = "DateTime" rules = { [ { required: true , message: 'Please choose the dateTime' } ] } > < DatePicker.RangePicker style = { { width: '100%' } } getPopupContainer = { trigger => trigger.parentElement} /> </ Form.Item > </ Col > </ Row > < Row gutter = { 16 } > < Col span = { 24 } > < Form.Item name = "description" label = "Description" rules = { [ { required: true , message: 'please enter url description' , } , ] } > < Input.TextArea rows = { 4 } placeholder = "please enter url description" /> </ Form.Item > </ Col > </ Row > </ Form > </ Drawer > </ > ) ; } } ReactDOM. render ( < DrawerForm /> , mountNode) ; .site-form-in-drawer-wrapper { position : absolute; right : 0px; bottom : 0px; width : 100% ; padding : 10px 16px; text-align : right; background : #fff ; border-top : 1px solid #e9e9e9 ; } Open a new drawer on top of an existing drawer to handle multi branch tasks.
import { Drawer, Button } from 'antd' ; class App extends React.Component { state = { visible: false , childrenDrawer: false } ; showDrawer = ( ) => { this . setState ( { visible: true , } ) ; } ; onClose = ( ) => { this . setState ( { visible: false , } ) ; } ; showChildrenDrawer = ( ) => { this . setState ( { childrenDrawer: true , } ) ; } ; onChildrenDrawerClose = ( ) => { this . setState ( { childrenDrawer: false , } ) ; } ; render ( ) { return ( < > < Button type = "primary" onClick = { this .showDrawer} > Open drawer </ Button > < Drawer title = "Multi-level drawer" width = { 520 } closable = { false } onClose = { this .onClose} visible = { this .state.visible} > < Button type = "primary" onClick = { this .showChildrenDrawer} > Two-level drawer </ Button > < Drawer title = "Two-level Drawer" width = { 320 } closable = { false } onClose = { this .onChildrenDrawerClose} visible = { this .state.childrenDrawer} > This is two-level drawer </ Drawer > </ Drawer > </ > ) ; } } ReactDOM. render ( < App /> , mountNode) ; The Drawer can appear from any edge of the screen.
import { Drawer, Button, Radio, Space } from 'antd' ; class App extends React.Component { state = { visible: false , placement: 'left' } ; showDrawer = ( ) => { this . setState ( { visible: true , } ) ; } ; onClose = ( ) => { this . setState ( { visible: false , } ) ; } ; onChange = e => { this . setState ( { placement: e.target.value, } ) ; } ; render ( ) { const { placement, visible } = this .state; return ( < > < Space > < Radio.Group value = {placement} onChange = { this .onChange} > < Radio value = "top" > top </ Radio > < Radio value = "right" > right </ Radio > < Radio value = "bottom" > bottom </ Radio > < Radio value = "left" > left </ Radio > </ Radio.Group > < Button type = "primary" onClick = { this .showDrawer} > Open </ Button > </ Space > < Drawer title = "Basic Drawer" placement = {placement} closable = { false } onClose = { this .onClose} visible = {visible} key = {placement} > <p > Some contents... </p > <p > Some contents... </p > <p > Some contents... </p > </ Drawer > </ > ) ; } } ReactDOM. render ( < App /> , mountNode) ; Render in current dom. custom container, check getContainer.
import { Drawer, Button } from 'antd' ; class App extends React.Component { state = { visible: false } ; showDrawer = ( ) => { this . setState ( { visible: true , } ) ; } ; onClose = ( ) => { this . setState ( { visible: false , } ) ; } ; render ( ) { return ( <div className = "site-drawer-render-in-current-wrapper" > Render in this <div style = { { marginTop: 16 } } > < Button type = "primary" onClick = { this .showDrawer} > Open </ Button > </div > < Drawer title = "Basic Drawer" placement = "right" closable = { false } onClose = { this .onClose} visible = { this .state.visible} getContainer = { false } style = { { position: 'absolute' } } > <p > Some contents... </p > </ Drawer > </div > ) ; } } ReactDOM. render ( < App /> , mountNode) ; .site-drawer-render-in-current-wrapper { position : relative; height : 200px; padding : 48px; overflow : hidden; text-align : center; background : #fafafa ; border : 1px solid #ebedf0 ; border-radius : 2px; } -
- View Profile
-
- View Profile
Use Drawer to quickly preview details of an object, such as those in a list.
import { Drawer, List, Avatar, Divider, Col, Row } from 'antd' ; const DescriptionItem = ( { title, content } ) => ( <div className = "site-description-item-profile-wrapper" > <p className = "site-description-item-profile-p-label" > {title} : </p > {content} </div > ) ; class App extends React.Component { state = { visible: false } ; showDrawer = ( ) => { this . setState ( { visible: true , } ) ; } ; onClose = ( ) => { this . setState ( { visible: false , } ) ; } ; render ( ) { return ( < > <List dataSource= { [ { name: 'Lily' , } , { name: 'Lily' , } , ] } bordered renderItem= { item => ( < List.Item key = {item.id} actions = { [ <a onClick = { this .showDrawer} key = { ` a- ${item.id} ` } > View Profile </a > , ] } > < List.Item.Meta avatar = { < Avatar src = "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" /> } title = { <a href = "https://ant.design/index-cn" > {item.name} </a > } description = "Progresser XTech" /> </ List.Item > ) } / > < Drawer width = { 640 } placement = "right" closable = { false } onClose = { this .onClose} visible = { this .state.visible} > <p className = "site-description-item-profile-p" style = { { marginBottom: 24 } } > User Profile </p > <p className = "site-description-item-profile-p" > Personal </p > < Row > < Col span = { 12 } > < DescriptionItem title = "Full Name" content = "Lily" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Account" content = "[email protected]" /> </ Col > </ Row > < Row > < Col span = { 12 } > < DescriptionItem title = "City" content = "HangZhou" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Country" content = "China🇨🇳" /> </ Col > </ Row > < Row > < Col span = { 12 } > < DescriptionItem title = "Birthday" content = "February 2,1900" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Website" content = "-" /> </ Col > </ Row > < Row > < Col span = { 24 } > < DescriptionItem title = "Message" content = "Make things as simple as possible but no simpler." /> </ Col > </ Row > < Divider /> <p className = "site-description-item-profile-p" > Company </p > < Row > < Col span = { 12 } > < DescriptionItem title = "Position" content = "Programmer" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Responsibilities" content = "Coding" /> </ Col > </ Row > < Row > < Col span = { 12 } > < DescriptionItem title = "Department" content = "XTech" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Supervisor" content = { <a > Lin </a > } /> </ Col > </ Row > < Row > < Col span = { 24 } > < DescriptionItem title = "Skills" content = "C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc." /> </ Col > </ Row > < Divider /> <p className = "site-description-item-profile-p" > Contacts </p > < Row > < Col span = { 12 } > < DescriptionItem title = "Email" content = "[email protected]" /> </ Col > < Col span = { 12 } > < DescriptionItem title = "Phone Number" content = "+86 181 0000 0000" /> </ Col > </ Row > < Row > < Col span = { 24 } > < DescriptionItem title = "Github" content = { <a href = "http://github.com/ant-design/ant-design/" > github.com/ant-design/ant-design/ </a > } /> </ Col > </ Row > </ Drawer > </ > ) ; } } ReactDOM. render ( < App /> , mountNode) ; .site-description-item-profile-wrapper { margin-bottom : 7px; color : rgba ( 0, 0, 0, 0.65 ) ; font-size : 14px; line-height : 1.5715 ; } [data-theme='compact'] .site-description-item-profile-wrapper { font-size : 12px; line-height : 1.66667 ; } .ant-drawer-body p.site-description-item-profile-p { display : block; margin-bottom : 16px; color : rgba ( 0, 0, 0, 0.85 ) ; font-size : 16px; line-height : 1.5715 ; } [data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p { font-size : 14px; line-height : 1.66667 ; } .site-description-item-profile-p-label { display : inline-block; margin-right : 8px; color : rgba ( 0, 0, 0, 0.85 ) ; } The default width (or height) of Drawer is 378px, and there is a presetted large size 736px.
import React, { useState } from 'react' ; import { Drawer, Button, Space } from 'antd' ; import { DrawerProps } from 'antd/es/drawer' ; const App: React. FC = ( ) => { const [visible, setVisible] = useState ( false ) ; const [size, setSize] = useState<DrawerProps[ 'size' ] > ( ) ; const showDefaultDrawer = ( ) => { setSize ( 'default' ) ; setVisible ( true ) ; } ; const showLargeDrawer = ( ) => { setSize ( 'large' ) ; setVisible ( true ) ; } ; const onClose = ( ) => { setVisible ( false ) ; } ; return ( < > < Space > < Button type = "primary" onClick = {showDefaultDrawer} > Open Default Size ( 378px) </ Button > < Button type = "primary" onClick = {showLargeDrawer} > Open Large Size ( 736px) </ Button > </ Space > < Drawer title = { ` ${size} Drawer ` } placement = "right" size = {size} onClose = {onClose} visible = {visible} extra = { < Space > < Button onClick = {onClose} > Cancel </ Button > < Button type = "primary" onClick = {onClose} > OK </ Button > </ Space > } > <p > Some contents... </p > <p > Some contents... </p > <p > Some contents... </p > </ Drawer > </ > ) ; } ; ReactDOM. render ( < App /> , mountNode) ; API#
| Props | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - | |
| bodyStyle | Style of the drawer content part | object | - | |
| className | The class name of the container of the Drawer dialog | string | - | |
| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true | |
| closeIcon | Custom close icon | ReactNode | < CloseOutlined /> | |
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | |
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
| drawerStyle | Style of the popup layer element | object | - | |
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
| footer | The footer for Drawer | ReactNode | - | |
| footerStyle | Style of the drawer footer part | CSSProperties | - | |
| forceRender | Prerender Drawer component forcely | boolean | false | |
| getContainer | Return the mounted node for Drawer | HTMLElement | () => HTMLElement | Selectors | false | body | |
| headerStyle | Style of the drawer header part | object | - | |
| height | Placement is top or bottom, height of the Drawer dialog | string | number | 256 | |
| keyboard | Whether support press esc to close | boolean | true | |
| mask | Whether to show mask or not | boolean | true | |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | |
| maskStyle | Style for Drawer's mask element | CSSProperties | {} | |
| placement | The placement of the Drawer | top | right | bottom | left | right | |
| push | Nested drawers push behavior | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
| style | Style of wrapper element which contains mask compare to drawerStyle | CSSProperties | - | |
| size | presetted size of drawer, default 378px and large 736px | 'default' | 'large' | 'default' | 4.17.0 |
| title | The title for Drawer | ReactNode | - | |
| visible | Whether the Drawer dialog is visible or not | boolean | false | |
| width | Width of the Drawer dialog | string | number | 378 | |
| zIndex | The z-index of the Drawer | number | 1000 | |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |
Source: https://ant.design/components/drawer/
0 Response to "Name of Slides for Draws"
Post a Comment