import React, { useState } from 'react'; import { Drawer, Modal, Space, Switch } 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;