mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Button, Drawer, Space } from 'antd';
|
||
|
import type { DrawerProps } from 'antd/es/drawer';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [open, setOpen] = useState(false);
|
||
|
const [size, setSize] = useState<DrawerProps['size']>();
|
||
|
|
||
|
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;
|