mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
62949a6bd6
* feat: Drawer supports extra * docs: add description for drawer extra demo * docs: add extra in API * update snapshot * fix rtl style * fix demo typescript errors * update snapshot * design for close icon only * update snapshot * update demo and default width * add size prop * improve demo * update snapshot * update demo * update snapshot
70 lines
1.6 KiB
Markdown
70 lines
1.6 KiB
Markdown
---
|
|
order: 10
|
|
title:
|
|
zh-CN: 预设宽度
|
|
en-US: Presetted size
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
抽屉的默认宽度为 `378px`,另外还提供一个大号抽屉 `736px`,可以用 `size` 属性来设置。
|
|
|
|
## en-US
|
|
|
|
The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.
|
|
|
|
```tsx
|
|
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);
|
|
```
|