DialogBundle size 11 KB |
|
Unlike a Toast, the Dialog interrupts the user experience, adding a new step to their navigation journey. It can be used to confirm important actions or to present additional information to the current context.
The Dialog can be triggered from 5 different positions. Clicking outside of it will close it.
Installation
pnpm add @inpulse-ds/dialogAPI
Root
Contains all parts of a Dialog.
| Prop | Type | Default value | Required |
defaultOpen | boolean | - | No |
open | boolean | - | No |
onOpenChange | function | - | No |
Trigger
Responsible for opening the Dialog.
| Prop | Type | Default value | Required |
asChild | boolean | - | No |
| Attribute | Value | ||
[data-state] | "open" | "closed" | ||
Content
Abraça todo o conteúdo exibido pelo Dialog.
| Prop | Type | Default value | Required |
asChild | boolean | - | No |
onOpenAutoFocus | function | - | No |
onCloseAutoFocus | function | - | No |
onEscapeKeyDown | function | - | No |
onPointerDownOutside | function | - | No |
onInteractOutside | function | - | No |
| Attribute | Value | ||
[data-state] | "open" | "closed" | ||
Close
Responsible for closing the Dialog.
| Prop | Type | Default value | Required |
asChild | boolean | - | No |
Title
A title that is announced in an accessible way when a Dialog is opened. If you want to hide the title, wrap it with a <VisuallyHidden asChild>.
| Prop | Type | Default value | Required |
asChild | boolean | - | No |
Description
A description that is announced in an accessible way when a Dialog is opened.
| Prop | Type | Default value | Required |
asChild | boolean | - | No |
Examples
Center
This is the default Dialog position.
Aligned to the corners of the screen
You can ask the Dialog to appear from one of the four corners of the screen using the position property that must be applied to the DialogContent subcomponent. Possible values are: top, right, bottom and left.
Scrollable content
The Dialog that comes from the sides will automatically enable scrolling if the content exceeds the height of the device. Note that Dialog with position value center, top or bottom is not intended to have long extensions of content and therefore does not have scroll by default.
Closing programmatically
Use props to close the Dialog programmatically. For example, after completing an asynchronous action.