Sheet
Flexible dialog-component that appears as a bottom sheet on mobile and can be configured as either a side-drawer or a dialog on desktop.
Basic usage
Default the sheet appears as a bottom sheet on mobile and a right side-drawer on desktop.
See the code for a code walk-through.
Desktop modes
The Sheet-component can be configured to appear as a side-drawer or a dialog on desktop
by setting the desktopMode-prop to either side-drawer or dialog.
First focus on heading
The Sheet-component can be configured to focus on the heading when it appears by using:
Configurability
The Sheet can be configured in a number of ways on both mobile and desktop.
The height can be configured for the Sheet-mode and the Dialog-mode
through the twSheetHeight and twDialogHeightPlacement-props respectively.
The width can be configured for the side-drawer and the dialog-mode
through the twDesktopWidth-prop.
Text and background colors can be configured through the twColor,
twFooterColor and twHandleColor-props.
The backdrop blur can be configured through the twBackdropBlur-prop.
When using withContentStyling import @ntds/core/css/src/ntds-content.css