Dialog
A dialog is useful for displaying infomation that commands the user's attention.
Sancho exports these components to create dialogs:
- Dialog: Your basic dialog which includes a DialogHeader if provided a title.
- DialogHeader: A standard header of a dialog, which includes a title and a close button.
Basic usage
View dialog
/** @jsx jsx */ function DialogExample() { const [open, setOpen] = React.useState(false); const theme = useTheme(); return ( <React.Fragment> <Button onPress={() => setOpen(true)}>View dialog</Button> <Dialog isOpen={open} onRequestClose={() => setOpen(false)} title="Dialog title" > <div css={{ padding: theme.spaces.lg }}> <Text>Dialog content</Text> <div css={{ display: "flex", marginTop: theme.spaces.lg, justifyContent: "flex-end" }} > <Button intent="primary">Save</Button> </div> </div> </Dialog> </React.Fragment> ); }
Fullscreen mobile example
This option enables fullscreen on mobile devices, which is typically a better user experience.
View dialog
function DialogExample() { const [open, setOpen] = React.useState(false); const theme = useTheme(); return ( <React.Fragment> <Button onPress={() => setOpen(true)}>View dialog</Button> <Dialog mobileFullscreen isOpen={open} onRequestClose={() => setOpen(false)} title="Dialog title" > <div css={{ padding: theme.spaces.lg }}> <Text>Dialog content</Text> <div css={{ display: "flex", marginTop: theme.spaces.lg, justifyContent: "flex-end" }} > <Button intent="primary">Save</Button> </div> </div> </Dialog> </React.Fragment> ); }
Show Code
Without a title
When a title isn't provided, a header isn't added.
View Dialog
function DialogExample() { const [open, setOpen] = React.useState(false); const theme = useTheme(); return ( <React.Fragment> <Button onPress={() => setOpen(true)}>View Dialog</Button> <Dialog isOpen={open} onRequestClose={() => setOpen(false)}> <div css={{ padding: theme.spaces.lg }}> <Text>Dialog content</Text> <div css={{ display: "flex", marginTop: theme.spaces.lg, justifyContent: "flex-end" }} > <Button intent="primary">Save</Button> </div> </div> </Dialog> </React.Fragment> ); }
Show Code
API
Dialog
isOpen*boolean
Whether the dialog is showing
titlestring
An optional title. If set, a header will be added to your dialog.
mobileFullscreenboolean
Fill the entire screen on mobile devices
onRequestClose*() => void
A callback for closing the dialog.
children*ReactNode
The contents of the dialog
cssInterpolationWithTheme<any>
DialogHeader
title*string
The title of the header
onRequestClose() => void
An optional callback for closing the dialog. If set, a close button will be added to the header
cssInterpolationWithTheme<any>