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.
57 lines
1.5 KiB
57 lines
1.5 KiB
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;
|
|
|