ModalWindow
Features
- 🚧 TODO
Remaining
- 🚧 TODO
Live example
Result
Loading...
Live Editor
function ModalWindowExample() { const [open, setOpen] = useState(false); const close = () => setOpen(false); return ( <> <Button onPress={() => setOpen(true)}>Open</Button> {open && ( <ModalWindow interactions="all" // try "none" or "move" onClose={close} > <WindowLayout header="Window title" content={<div style={{ padding: "1rem" }}>Window content</div>} footer={ <WindowLayout.Footer hasBorder left={ <> <TooltipTrigger tooltip={<HelpTooltip helpText="Show Help Contents" />} > <Button variant="icon"> <PlatformIcon icon="actions/help"></PlatformIcon> </Button> </TooltipTrigger> <Checkbox>Some settings</Checkbox> </> } right={ <> <Button autoFocus onPress={close}> Cancel </Button> <Button variant="default" onPress={close}> OK </Button> </> } /> } /> </ModalWindow> )} </> ); }
WindowManager
🚧