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> )} </> ); }

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

🚧