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
48 KiB
785 lines
48 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2482],{154152: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),D=t(574399),f=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),M=t(212039),B=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:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(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)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-drawer-demo-basic-right"},previewerProps:{title:"\u57FA\u7840\u62BD\u5C49",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>\u57FA\u7840\u62BD\u5C49\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u53F3\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002</p>"}},{demo:{id:"components-drawer-demo-placement"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u4F4D\u7F6E",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>\u81EA\u5B9A\u4E49\u4F4D\u7F6E\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u76F8\u5E94\u7684\u4F4D\u7F6E\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002</p>"}},{demo:{id:"components-drawer-demo-extra"},previewerProps:{title:"\u989D\u5916\u64CD\u4F5C",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>\u5728 Ant Design \u89C4\u8303\u4E2D\uFF0C\u64CD\u4F5C\u6309\u94AE\u5EFA\u8BAE\u653E\u5728\u62BD\u5C49\u7684\u53F3\u4E0A\u89D2\uFF0C\u53EF\u4EE5\u4F7F\u7528 <code>extra</code> \u5C5E\u6027\u6765\u5B9E\u73B0\u3002</p>"}},{demo:{id:"components-drawer-demo-render-in-current"},previewerProps:{title:"\u6E32\u67D3\u5728\u5F53\u524D 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>\u6E32\u67D3\u5728\u5F53\u524D dom \u91CC\u3002\u81EA\u5B9A\u4E49\u5BB9\u5668\uFF0C\u67E5\u770B <code>getContainer</code>\u3002</p>
|
|
<blockquote>
|
|
<p>\u6CE8\u610F\uFF1A\u5728 v5 \u4E2D <code>style</code> \u4E0E <code>className</code> \u8FC1\u79FB\u81F3 Drawer \u9762\u677F\u4E0A\u4E0E Modal \u4FDD\u6301\u4E00\u81F4\uFF0C\u539F <code>style</code> \u4E0E <code>className</code> \u66FF\u6362\u4E3A <code>rootStyle</code> \u4E0E <code>rootClassName</code>\u3002</p>
|
|
</blockquote>`}},{demo:{id:"components-drawer-demo-form-in-drawer"},previewerProps:{title:"\u62BD\u5C49\u8868\u5355",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>\u5728\u62BD\u5C49\u4E2D\u4F7F\u7528\u8868\u5355\u3002</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:"\u4FE1\u606F\u9884\u89C8\u62BD\u5C49",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>\u9700\u8981\u5FEB\u901F\u9884\u89C8\u5BF9\u8C61\u6982\u8981\u65F6\u4F7F\u7528\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002</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:"\u591A\u5C42\u62BD\u5C49",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>\u5728\u62BD\u5C49\u5185\u6253\u5F00\u65B0\u7684\u62BD\u5C49\uFF0C\u7528\u4EE5\u89E3\u51B3\u591A\u5206\u652F\u4EFB\u52A1\u7684\u590D\u6742\u72B6\u51B5\u3002</p>"}},{demo:{id:"components-drawer-demo-size"},previewerProps:{title:"\u9884\u8BBE\u5BBD\u5EA6",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>\u62BD\u5C49\u7684\u9ED8\u8BA4\u5BBD\u5EA6\u4E3A <code>378px</code>\uFF0C\u53E6\u5916\u8FD8\u63D0\u4F9B\u4E00\u4E2A\u5927\u53F7\u62BD\u5C49 <code>736px</code>\uFF0C\u53EF\u4EE5\u7528 <code>size</code> \u5C5E\u6027\u6765\u8BBE\u7F6E\u3002</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>\u652F\u6301 ConfigProvider \u914D\u7F6E\u3002</p>"}},{demo:{id:"components-drawer-demo-no-mask"},previewerProps:{debug:!0,title:"\u65E0\u906E\u7F69",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>\u901A\u8FC7 <code>mask={false}</code> \u53BB\u6389\u906E\u7F69\u3002</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>\u8C03\u8BD5\u7528\u7EC4\u4EF6\uFF0C\u8BF7\u52FF\u76F4\u63A5\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-drawer-demo-scroll-debug"},previewerProps:{debug:!0,title:"\u6EDA\u52A8\u9501\u5B9A\u8C03\u8BD5",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>\u5F53 Modal \u548C Drawer \u5171\u540C\u4F5C\u7528\u65F6\u7684\u6EDA\u52A8\u9501\u5B9A\u8C03\u8BD5\u3002</p>"}},{demo:{id:"components-drawer-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 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[4].value),n[5].value,(0,e.tZ)("code",null,n[6].value),n[7].value,(0,e.tZ)("code",null,n[8].value),n[9].value,(0,e.tZ)("code",null,n[10].value),n[11].value,(0,e.tZ)("code",null,n[12].value),n[13].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[14].value),(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)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[19].value),(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)("tr",null,(0,e.tZ)("td",null,n[24].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[28].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[32].value),(0,e.tZ)("td",null,n[33].value),(0,e.tZ)("td",null,n[34].value),(0,e.tZ)("td",null,n[35].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,n[37].value,(0,e.tZ)("code",null,n[38].value),n[39].value,(0,e.tZ)("code",null,n[40].value),n[41].value),(0,e.tZ)("td",null,n[42].value),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value),(0,e.tZ)("td",null,n[51].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[52].value),(0,e.tZ)("td",null,n[53].value),(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)("tr",null,(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value),(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[65].value),(0,e.tZ)("td",null,n[66].value),(0,e.tZ)("td",null,n[67].value),(0,e.tZ)("td",null,n[68].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null,n[70].value,(0,e.tZ)("strong",null,n[71].value),n[72].value,(0,e.tZ)("code",null,n[73].value),n[74].value),(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null,n[82].value,(0,e.tZ)("code",null,n[83].value),n[84].value,(0,e.tZ)("code",null,n[85].value),n[86].value,(0,e.tZ)("code",null,n[87].value),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,n[105].value),(0,e.tZ)("td",null,n[106].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[107].value),(0,e.tZ)("td",null,n[108].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[109].value),n[110].value,(0,e.tZ)("code",null,n[111].value),n[112].value,(0,e.tZ)("code",null,n[113].value),n[114].value,(0,e.tZ)("code",null,n[115].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[116].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[117].value),(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)("tr",null,(0,e.tZ)("td",null,n[122].value),(0,e.tZ)("td",null,n[123].value),(0,e.tZ)("td",null,n[124].value),(0,e.tZ)("td",null,n[125].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[126].value),(0,e.tZ)("td",null,n[127].value,(0,e.tZ)("code",null,n[128].value),n[129].value,(0,e.tZ)("code",null,n[130].value)),(0,e.tZ)("td",null,n[131].value),(0,e.tZ)("td",null,n[132].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[133].value),(0,e.tZ)("td",null,n[134].value,(0,e.tZ)("code",null,n[135].value),n[136].value,(0,e.tZ)("code",null,n[137].value)),(0,e.tZ)("td",null,n[138].value),(0,e.tZ)("td",null,n[139].value),(0,e.tZ)("td",null,n[140].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[141].value),(0,e.tZ)("td",null,n[142].value,(0,e.tZ)("code",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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[146].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[150].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[154].value),(0,e.tZ)("td",null,n[155].value),(0,e.tZ)("td",null,n[156].value),(0,e.tZ)("td",null,n[157].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[158].value),(0,e.tZ)("td",null,n[159].value,(0,e.tZ)("code",null,n[160].value)),(0,e.tZ)("td",null,n[161].value),(0,e.tZ)("td",null,n[162].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[163].value),(0,e.tZ)("td",null,n[164].value),(0,e.tZ)("td",null,n[165].value),(0,e.tZ)("td",null,n[166].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}}]);
|
|
|