mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Switch, Space, Drawer, Modal } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
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;
|