You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
785 lines
46 KiB
785 lines
46 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[7764],{519809:function(p,o,t){t.r(o);var m=t(502143),_=t(968521),g=t(720719),v=t(28840),w=t(759907),a=t(828089),h=t(825673),Z=t(902068),f=t(574399),D=t(863942),b=t(316073),C=t(24628),x=t(719260),k=t(956140),c=t(127179),i=t(905388),y=t(40428),P=t(606965),O=t(268696),R=t(587302),r=t(424128),S=t(249706),E=t(795127),I=t(116846),B=t(212039),M=t(73024),A=t(553913),l=t(606641),s=t(667294),e=t(370917);function d(){var u=(0,l.eL)(),n=u.texts;return(0,e.tZ)(l.dY,null,(0,e.tZ)(s.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[2].value),(0,e.tZ)("li",null,n[3].value),(0,e.tZ)("li",null,n[4].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-drawer-demo-basic-right"},previewerProps:{title:"Basic",filename:"components/drawer/demo/basic-right.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showDrawer}>
|
|
Open
|
|
</Button>
|
|
<Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Basic drawer.</p>"}},{demo:{id:"components-drawer-demo-placement"},previewerProps:{title:"Custom Placement",filename:"components/drawer/demo/placement.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer, Radio, Space } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [placement, setPlacement] = useState('left');
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
const onChange = (e) => {
|
|
setPlacement(e.target.value);
|
|
};
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Radio.Group value={placement} onChange={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={showDrawer}>
|
|
Open
|
|
</Button>
|
|
</Space>
|
|
<Drawer
|
|
title="Basic Drawer"
|
|
placement={placement}
|
|
closable={false}
|
|
onClose={onClose}
|
|
open={open}
|
|
key={placement}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>The Drawer can appear from any edge of the screen.</p>"}},{demo:{id:"components-drawer-demo-extra"},previewerProps:{title:"Extra Actions",filename:"components/drawer/demo/extra.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer, Radio, Space } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [placement, setPlacement] = useState('right');
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onChange = (e) => {
|
|
setPlacement(e.target.value);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Radio.Group value={placement} onChange={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={showDrawer}>
|
|
Open
|
|
</Button>
|
|
</Space>
|
|
<Drawer
|
|
title="Drawer with extra actions"
|
|
placement={placement}
|
|
width={500}
|
|
onClose={onClose}
|
|
open={open}
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Extra actions should be placed at corner of drawer in Ant Design, you can use <code>extra</code> prop for that.</p>"}},{demo:{id:"components-drawer-demo-render-in-current"},previewerProps:{title:"Render in current dom",filename:"components/drawer/demo/render-in-current.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer, theme } from 'antd';
|
|
const App = () => {
|
|
const { token } = theme.useToken();
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
const containerStyle = {
|
|
position: 'relative',
|
|
height: 200,
|
|
padding: 48,
|
|
overflow: 'hidden',
|
|
textAlign: 'center',
|
|
background: token.colorFillAlter,
|
|
border: \`1px solid \${token.colorBorderSecondary}\`,
|
|
borderRadius: token.borderRadiusLG,
|
|
};
|
|
return (
|
|
<div style={containerStyle}>
|
|
Render in this
|
|
<div
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Button type="primary" onClick={showDrawer}>
|
|
Open
|
|
</Button>
|
|
</div>
|
|
<Drawer
|
|
title="Basic Drawer"
|
|
placement="right"
|
|
closable={false}
|
|
onClose={onClose}
|
|
open={open}
|
|
getContainer={false}
|
|
>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:`<p>Render in current dom. custom container, check <code>getContainer</code>.</p>
|
|
<blockquote>
|
|
<p>Note: <code>style</code> and <code>className</code> props are moved to Drawer panel in v5 which is aligned with Modal component. Original <code>style</code> and <code>className</code> props are replaced by <code>rootStyle</code> and <code>rootClassName</code>.</p>
|
|
</blockquote>`}},{demo:{id:"components-drawer-demo-form-in-drawer"},previewerProps:{title:"Submit form in drawer",filename:"components/drawer/demo/form-in-drawer.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';
|
|
const { Option } = Select;
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
|
|
New account
|
|
</Button>
|
|
<Drawer
|
|
title="Create a new account"
|
|
width={720}
|
|
onClose={onClose}
|
|
open={open}
|
|
bodyStyle={{
|
|
paddingBottom: 80,
|
|
}}
|
|
extra={
|
|
<Space>
|
|
<Button onClick={onClose}>Cancel</Button>
|
|
<Button onClick={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>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Use a form in Drawer with a submit button.</p>",style:`.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;
|
|
}`}},{demo:{id:"components-drawer-demo-user-profile"},previewerProps:{title:"Preview drawer",filename:"components/drawer/demo/user-profile.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Avatar, Col, Divider, Drawer, List, 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>
|
|
);
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<List
|
|
dataSource={[
|
|
{
|
|
id: 1,
|
|
name: 'Lily',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Lily',
|
|
},
|
|
]}
|
|
bordered
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
key={item.id}
|
|
actions={[
|
|
<a onClick={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={onClose} open={open}>
|
|
<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="AntDesign@example.com" />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12}>
|
|
<DescriptionItem title="City" content="HangZhou" />
|
|
</Col>
|
|
<Col span={12}>
|
|
<DescriptionItem title="Country" content="China\u{1F1E8}\u{1F1F3}" />
|
|
</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="AntDesign@example.com" />
|
|
</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>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Use Drawer to quickly preview details of an object, such as those in a list.</p>",style:`.site-description-item-profile-wrapper {
|
|
margin-bottom: 7px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-size: 14px;
|
|
line-height: 1.5715;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.site-description-item-profile-p-label {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}`}},{demo:{id:"components-drawer-demo-multi-level-drawer"},previewerProps:{title:"Multi-level drawer",filename:"components/drawer/demo/multi-level-drawer.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [childrenDrawer, setChildrenDrawer] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
const showChildrenDrawer = () => {
|
|
setChildrenDrawer(true);
|
|
};
|
|
const onChildrenDrawerClose = () => {
|
|
setChildrenDrawer(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showDrawer}>
|
|
Open drawer
|
|
</Button>
|
|
<Drawer title="Multi-level drawer" width={520} closable={false} onClose={onClose} open={open}>
|
|
<Button type="primary" onClick={showChildrenDrawer}>
|
|
Two-level drawer
|
|
</Button>
|
|
<Drawer
|
|
title="Two-level Drawer"
|
|
width={320}
|
|
closable={false}
|
|
onClose={onChildrenDrawerClose}
|
|
open={childrenDrawer}
|
|
>
|
|
This is two-level drawer
|
|
</Drawer>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Open a new drawer on top of an existing drawer to handle multi branch tasks.</p>"}},{demo:{id:"components-drawer-demo-size"},previewerProps:{title:"Preset size",filename:"components/drawer/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer, Space } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [size, setSize] = useState();
|
|
const showDefaultDrawer = () => {
|
|
setSize('default');
|
|
setOpen(true);
|
|
};
|
|
const showLargeDrawer = () => {
|
|
setSize('large');
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(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}
|
|
open={open}
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>The default width (or height) of Drawer is <code>378px</code>, and there is a preset large size <code>736px</code>.</p>"}},{demo:{id:"components-drawer-demo-config-provider"},previewerProps:{debug:!0,title:"ConfigProvider",filename:"components/drawer/demo/config-provider.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useRef, useState } from 'react';
|
|
import { Button, ConfigProvider, Drawer } from 'antd';
|
|
const App = () => {
|
|
const domRef = useRef(null);
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<ConfigProvider getPopupContainer={() => domRef.current}>
|
|
<div ref={domRef} className="site-drawer-render-in-current-wrapper">
|
|
<Button type="primary" onClick={showDrawer}>
|
|
Open
|
|
</Button>
|
|
<Drawer
|
|
rootStyle={{
|
|
position: 'absolute',
|
|
}}
|
|
title="ConfigProvider"
|
|
placement="right"
|
|
onClose={onClose}
|
|
open={open}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</div>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>config by ConfigProvider.</p>"}},{demo:{id:"components-drawer-demo-no-mask"},previewerProps:{debug:!0,title:"No mask",filename:"components/drawer/demo/no-mask.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Drawer } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showDrawer}>
|
|
Open
|
|
</Button>
|
|
<Drawer
|
|
title="Drawer without mask"
|
|
placement="right"
|
|
mask={false}
|
|
onClose={onClose}
|
|
open={open}
|
|
contentWrapperStyle={{
|
|
width: 333,
|
|
background: 'red',
|
|
borderRadius: 20,
|
|
boxShadow: '-5px 0 5px green',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Remove mask.</p>"}},{demo:{id:"components-drawer-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/drawer/demo/render-panel.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Drawer } from 'antd';
|
|
|
|
/** Test usage. Do not use in your production. */
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
|
|
export default () => (
|
|
<div
|
|
style={{
|
|
padding: 32,
|
|
background: '#e6e6e6',
|
|
}}
|
|
>
|
|
<InternalDrawer
|
|
title="Hello Title"
|
|
style={{
|
|
height: 300,
|
|
}}
|
|
footer="Footer!"
|
|
>
|
|
Hello Content
|
|
</InternalDrawer>
|
|
</div>
|
|
);
|
|
`,description:"<p>Debug usage. Do not use in your production.</p>"}},{demo:{id:"components-drawer-demo-scroll-debug"},previewerProps:{debug:!0,title:"Scroll Debug",filename:"components/drawer/demo/scroll-debug.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Switch, Space, Drawer, Modal } from 'antd';
|
|
const App = () => {
|
|
const [drawer, setDrawer] = useState(false);
|
|
const [drawer2, setDrawer2] = useState(false);
|
|
const [modal, setModal] = useState(false);
|
|
const [modal2, setModal2] = useState(false);
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 999999,
|
|
}}
|
|
>
|
|
<Space>
|
|
<Switch
|
|
checkedChildren="Drawer"
|
|
unCheckedChildren="Drawer"
|
|
checked={drawer}
|
|
onChange={() => setDrawer(!drawer)}
|
|
/>
|
|
<Switch
|
|
checkedChildren="Drawer2"
|
|
unCheckedChildren="Drawer2"
|
|
checked={drawer2}
|
|
onChange={() => setDrawer2(!drawer2)}
|
|
/>
|
|
<Switch
|
|
checkedChildren="Modal"
|
|
unCheckedChildren="Modal"
|
|
checked={modal}
|
|
onChange={() => setModal(!modal)}
|
|
/>
|
|
<Switch
|
|
checkedChildren="Modal2"
|
|
unCheckedChildren="Modal2"
|
|
checked={modal2}
|
|
onChange={() => setModal2(!modal2)}
|
|
/>
|
|
</Space>
|
|
<Drawer title="Drawer" open={drawer}>
|
|
Some contents...
|
|
<Drawer title="Drawer Sub" open={drawer}>
|
|
Sub contents...
|
|
</Drawer>
|
|
</Drawer>
|
|
<Drawer title="Drawer2" open={drawer2}>
|
|
Some contents...
|
|
</Drawer>
|
|
<Modal title="Modal" open={modal}>
|
|
Some contents...
|
|
</Modal>
|
|
<Modal title="Modal2" open={modal2}>
|
|
Some contents...
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Scroll lock debug with Modal & Drawer.</p>"}},{demo:{id:"components-drawer-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/drawer/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { ConfigProvider, Drawer } from 'antd';
|
|
|
|
/** Test usage. Do not use in your production. */
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
|
|
export default () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Drawer: {
|
|
footerPaddingBlock: 0,
|
|
footerPaddingInline: 0,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: 32,
|
|
background: '#e6e6e6',
|
|
}}
|
|
>
|
|
<InternalDrawer
|
|
title="Hello Title"
|
|
style={{
|
|
height: 300,
|
|
}}
|
|
footer="Footer!"
|
|
>
|
|
Hello Content
|
|
</InternalDrawer>
|
|
</div>
|
|
</ConfigProvider>
|
|
);
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[5].value),n[6].value,(0,e.tZ)("code",null,n[7].value),n[8].value,(0,e.tZ)("code",null,n[9].value),n[10].value,(0,e.tZ)("code",null,n[11].value),n[12].value,(0,e.tZ)("code",null,n[13].value),n[14].value),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[15].value),(0,e.tZ)("th",null,n[16].value),(0,e.tZ)("th",null,n[17].value),(0,e.tZ)("th",null,n[18].value),(0,e.tZ)("th",null,n[19].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null,n[22].value),(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null,n[24].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null,n[26].value),(0,e.tZ)("td",null,n[27].value),(0,e.tZ)("td",null,n[28].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null,n[32].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[33].value),(0,e.tZ)("td",null,n[34].value,(0,e.tZ)("code",null,n[35].value),n[36].value),(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null,n[40].value,(0,e.tZ)("code",null,n[41].value),n[42].value,(0,e.tZ)("code",null,n[43].value)),(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].value),(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[50].value),(0,e.tZ)("td",null,n[51].value),(0,e.tZ)("td",null,n[52].value),(0,e.tZ)("td",null,n[53].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[54].value),(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null,n[56].value),(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null,n[65].value),(0,e.tZ)("td",null,n[66].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[67].value),(0,e.tZ)("td",null,n[68].value),(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null,n[70].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,n[72].value),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,n[74].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value,(0,e.tZ)("code",null,n[81].value),n[82].value,(0,e.tZ)("code",null,n[83].value),n[84].value),(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,n[86].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[87].value),(0,e.tZ)("td",null,n[88].value),(0,e.tZ)("td",null,n[89].value),(0,e.tZ)("td",null,n[90].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[91].value),(0,e.tZ)("td",null,n[92].value),(0,e.tZ)("td",null,n[93].value),(0,e.tZ)("td",null,n[94].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[95].value),(0,e.tZ)("td",null,n[96].value),(0,e.tZ)("td",null,n[97].value),(0,e.tZ)("td",null,n[98].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[99].value),(0,e.tZ)("td",null,n[100].value),(0,e.tZ)("td",null,n[101].value),(0,e.tZ)("td",null,n[102].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[103].value),(0,e.tZ)("td",null,n[104].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[105].value),n[106].value,(0,e.tZ)("code",null,n[107].value),n[108].value,(0,e.tZ)("code",null,n[109].value),n[110].value,(0,e.tZ)("code",null,n[111].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[112].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[113].value),(0,e.tZ)("td",null,n[114].value),(0,e.tZ)("td",null,n[115].value),(0,e.tZ)("td",null,n[116].value),(0,e.tZ)("td",null,n[117].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[118].value),(0,e.tZ)("td",null,n[119].value),(0,e.tZ)("td",null,n[120].value),(0,e.tZ)("td",null,n[121].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[122].value),(0,e.tZ)("td",null,n[123].value,(0,e.tZ)("strong",null,n[124].value),n[125].value,(0,e.tZ)("code",null,n[126].value)),(0,e.tZ)("td",null,n[127].value),(0,e.tZ)("td",null,n[128].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[129].value),(0,e.tZ)("td",null,n[130].value,(0,e.tZ)("code",null,n[131].value),n[132].value),(0,e.tZ)("td",null,n[133].value),(0,e.tZ)("td",null,n[134].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[135].value),(0,e.tZ)("td",null,n[136].value,(0,e.tZ)("code",null,n[137].value),n[138].value,(0,e.tZ)("code",null,n[139].value)),(0,e.tZ)("td",null,n[140].value),(0,e.tZ)("td",null,n[141].value),(0,e.tZ)("td",null,n[142].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[143].value),(0,e.tZ)("td",null,n[144].value),(0,e.tZ)("td",null,n[145].value),(0,e.tZ)("td",null,n[146].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[147].value),(0,e.tZ)("td",null,n[148].value),(0,e.tZ)("td",null,n[149].value),(0,e.tZ)("td",null,n[150].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[151].value),(0,e.tZ)("td",null,n[152].value),(0,e.tZ)("td",null,n[153].value),(0,e.tZ)("td",null,n[154].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[155].value),(0,e.tZ)("td",null,n[156].value,(0,e.tZ)("code",null,n[157].value),n[158].value),(0,e.tZ)("td",null,n[159].value),(0,e.tZ)("td",null,n[160].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[161].value),(0,e.tZ)("td",null,n[162].value),(0,e.tZ)("td",null,n[163].value),(0,e.tZ)("td",null,n[164].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(c.Z,{component:"Drawer"})))}o.default=d}}]);
|
|
|