header? | ReactNode | — | Add a custom header (under the step bars)
To use the standard header, use the `headerTitle` and `headerIcon` props |
headerTitle? | string | — | The title of the header
Use in combination with `headerIcon`
For a custom header, use the `header` prop |
headerIcon? | ReactNode | — | Use in combination with `headerTitle` |
twStepHeight | string | — | Specify the height of the steps
All steps must have the same height for the wizard to work smoothly |
noAutoPlay? | boolean | false | Whether to autoplay the steps |
autoplayDuration? | number | — | The duration of each step in milliseconds |
steps | ReactNode[] | — | The steps of the wizard
Can be any React component, but should typically be
a simple component without scrollable content.
Example:
```ts
[
<div>Step 1</div>,
<div>Step 2</div>,
<div>Step 3</div>,
]
``` |
twStepColors? | string[] | — | Change the color of the sheet when changing steps
Give a list of colors, one for each step |
onChangeStep? | (activeStep: number) => void | — | Callback when the active step changes
@param activeStep |
onCompleted? | () => void | — | Callback when the wizard is completed |
accessibleStepAnnouncement? | (activeStep: number, totalSteps: number, autoplaying: boolean) => string | — | Build a custom announcement for the active step
A sane default is provided
@param activeStep The active step
@param totalSteps The total number of steps
@param autoplaying Whether the wizard is currently autoplaying |
id? | string | — | Plain id |
important? | boolean | — | If the dialog is considered important (relative to
its "siblings")
If set to true:
- Will be placed in front of any non-important sibling
- Will be placed behind the first important sibling
If set to false (default):
- Will be placed behind all siblings |
show | boolean | — | Show/hide the modal |
onClose | () => void | — | Calling this will close the Sheet
Typically, this will call a local set state in the
application. |
nested? | ReactNode | — | Nested Dialog/Sheet/PromptScreen components |
initialFocus? | MutableRefObject<HTMLElement> | — | A ref to an element that should receive focus first.
@see https://headlessui.com/react/dialog#focus-management |
ntdsCustomContentClass? | string | — | Internal className-tap-in for handling advanced
heading configurations like in the responsible
gaming modals (the dark haiti-"trapezium" ⏢) |
closeGuard? | boolean | — | If activated, the modal will prevent the user
from dismissing the modal when swiping down
"optimistically" and simply animate the Sheet
up to its initial position.
Example: Only allow dismissal when the
customer have approved the customer agreement
This is only relevant for when appearing as
a sheet (and not as a modal). |
UNSAFE_header? | ReactNode | — | This feature is considered unstable.
Will most likely come into play when we look
at filtering in insta games |
footer? | ReactNode | — | Placed after the content at the bottom.
Will always be visible.
Typically, this place is used for call-to-action buttons. |
render? | (props) => ReactNode | — | Same as the `footer`-prop, but as a render-prop with two bool params that
can be used to differentiate:
1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)
*
NOTE! If both the `children` & `render` is defined, the `render` will be used. |
renderFooter? | (isBottomSheet: boolean, isPointerDevice: boolean) => ReactNode | — | Same as the `footer`-prop, but as a render-prop with two bool params that
can be used to differentiate:
1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)
*
NOTE! If both the `footer` & `renderFooter` is defined, the `renderFooter` will be used. |
absolutePositionedDecorator? | (customClassNames: (className: string, options?: { roundedTop?: boolean; roundedBottom?: boolean; }) => string) => ReactNode | — | Renders provided element outside the inner wrapper, forgoing any margin and padding
Default classNames being provided are: `absolute rounded-t-2xl rounded-b-2xl`
The rounded classes will follow the Sheet styling
both in "Sheet" (mobile) mode and "Dialog" mode (tablet/desktop)
Example:
```ts
absolutePositionedDecorator={customClassNames => (
<div
className={
customClassNames('inset-x-0 bottom-0 bg-blue-sky flex justify-center items-center p-2')
}
>
<HeartIcon />
</div>
)}
```
If you don't want the rounded corner |
twSheetHeight? | string | — | Lock the sheet height to a specific value
Default is full (h-full).
To make it grow with the content, use `h-auto` |
twDesktopWidth? | string | — | The width of the sheet when displayed as a left/right drawer or a dialog (desktop and tablet)
These settings have no effect on mobile (always full width)
Default: `max-w-xl w-11/12` |
twDialogHeightPlacement? | string | — | The height of the sheet when displayed as a dialog (desktop and tablet)
Default: `inset-y-0 my-auto h-fit` |
twColor? | string | — | The text and background color of the main area of the
Sheet/Modal.
Warning modal example: "bg-yellow-pastel" |
twZIndex? | string | — | Override the z-index of the Sheet
Default is z-1300 |
twFooterColor? | string | string[] | — | Color to use in the footer body.
If not given, the twColor-value is used instead.
Typically not needed.
Warning modal example: empty. |
UNSAFE_twHeaderColor? | string | — | Color to use in the header |
twBorderColor? | string | string[] | — | Border color to use around the header and footer
Typically not needed.
Warning modal example: empty. |
twHandleColor? | string | string[] | — | The color of the Sheet "drag knob/handle"
Only relevant if you change the background in twColor.
Warning modal example: "bg-silver" |
twPadding? | SheetStyleOverride | — | Padding to use for the main area of the Sheet/Modal. |
twFooterPadding? | SheetStyleOverride | — | The padding to use for the footer. |
childrenClassName? | string | — | Add class names to the immediate parent of the children
Note: When `withContentStyling` is active, the CSS class
for the content is also applied to the same element. |
noSafeAreaInsetBottom? | boolean | — | Opt out of bottom safe-area inset spacing in sheet mode (mobile).
By default, spacing is added to keep content and footer actions
above native iOS bars.
Default: false |
withContentStyling? | boolean | — | If set to true the content (`children`) will receive styling
of basic elements like <p>, <li>, <h*>, ...
Use this if you don't need full control of the elements mentioned above.
You can also add className `ntds-content --compact` any place in
your custom {children}.
Note: you have to import '@ntds/core/css/src/ntds-content.css'; |
noHandle? | boolean | — | Hides the handle (drag knob) in the side-sheet mode |
twBackdropBlur? | string | boolean | — | Deactivate or customise the backdrop blur effect
Default: backdrop-blur-sm
@see https://tailwindcss.com/docs/blur#blurring-elements |
dismissible? | boolean | ((isBottomSheet: boolean, isPointerDevice: boolean) => boolean) | — | If set to true, a close button will be shown in the side-sheet configuration
or when the bottom sheet is (rarely) shown on desktop
If you need to differentiate based on the sheet mode (bottom-sheet/side-sheet)
or based on if the active device is a pointer device or not, you can provide
a function instead of a boolean. This function will receive two bool params that
can be used to differentiate:
1. isBottomSheet - whether the sheet is currently displayed as a bottom-sheet
2. isPointerDevice - whether the device uses a pointer device or not (media pointer: fine)
- NOTE: Best effort: Better to fallback on an explicit close-button if has support for both touch and mouse
Important: Remember to provide an accessibleCloseButtonLabel
for the close button! |
accessibleCloseButtonLabel? | string | — | Give the close button a descriptive label for screen readers.
Used when `dismissible` is set to `true` |
desktopMode? | SheetDesktopMode | — | How the sheet should behave on desktop (and tablet)
Default: right |
shrinkWhenInBackground? | boolean | — | If set to true, the sheet will "shrink and lift" when a nested
dialog/sheet/prompt is shown.
Typically only used in combination with nested Sheets.
Only affects the sheet-mode.
Default: `false` |
outsideElement? | ReactNode | — | Render an element to be a part of the dialog semantics
(including focus handling) but outside the fixed container
Useful for edge cases where you need full control of the z-layer. |
lang? | string | — | Language property to specify the language of the content
Default: no |