Dialog components to build animated modal-like dialogs.
Members
(static, constant) Dialog :object
The root component for dialogs.
Provides shared state.
Type:
- object
Properties:
| Name | Type | Description |
|---|---|---|
static |
boolean | sets default state.static to the given value |
scroll |
boolean | sets default state.scroll to the given value |
- Source:
(static, constant) DialogClose :object
Dialog close button, which can be used as inline-child or auto-placed top-right.
Pass a child element with role="button" to trigger closing.
Type:
- object
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
asChild |
boolean |
<optional> |
- Source:
(static, constant) DialogContent :object
Place the dialog content in here.
If Dialog is scrollable, then overflowing content will be scrollable, otherwise clipped.
Type:
- object
- Source:
(static, constant) DialogDescription :object
An optional styled description section for the dialog.
Type:
- object
- Source:
(static, constant) DialogFooter :object
An optional styled footer for the dialog.
Type:
- object
- Source:
(static, constant) DialogHeader :object
An optional styled header for the dialog.
Type:
- object
- Source:
(static, constant) DialogOverlay :object
The backdrop/overlay in the background.
If state.static is not true, then clicking the overlay will close the dialog.
Type:
- object
- Source:
(static, constant) DialogTitle :object
An optional styled title for the dialog.
Type:
- object
- Source:
(static, constant) DialogTrigger :object
Provide any child element that has type="button" to trigger the dialog.
Type:
- object
- Source:
Type Definitions
DialogState
Properties:
| Name | Type | Description |
|---|---|---|
open |
boolean | mounting state |
visible |
boolean | visibility state |
static |
boolean | whether clicking backdrop hides dialog (false) or not (true) |
scroll |
boolean | whether content can be scrolled |
uid |
string | a random unique id for this instance to prefix id attriubutes |
- Source: