Dialog
The Dialog element displays a dialog box with customizable content. It can be used, for example, to simply display information to the user or to request confirmation or cancellation of an action taken by the user. It is located above the application content and must be manually dismissed by the user in order to continue interacting with the application. The dialog can be displayed in different screen sizes and positions.
Basic Usage
The Button component with the dialog attribute is used to display the Dialog component. For more information, go to Button.
Placement
The placement property specifies the placement of the dialog box on the screen. The default is slide-up. Other options are "stick-up", "fill-in", "slide-left", "slide-right".
Size
The size property adjusts the size of the dialog box on the screen. The default size is "small". Other options are "medium", "large" and "ex-large".
Attributes and Properties
placement
| Description | Specifies the location of the dialog box on the screen. Possible values include "slide-up", "slide-down" and others. |
| Attribute | placement |
| Type | "slide-up" ｜ "slide-down" ｜ "slide-left" ｜ "slide-right" ｜ "fill-in" ｜ string & Record<never, never> ｜ undefined |
| Default | slide-up |
size
| Description | Specifies the size of the dialog box on the screen. Possible values include "small", "medium" and others. |
| Attribute | size |
| Type | "small" ｜ "medium" ｜ "large" ｜ "ex-large" ｜ string & Record<never, never> ｜ undefined |
| Default | small |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
bodies | Refers to the main content of the dialog |
header | Refers to the header of the dialog box |
footer | Refers to the footer of the dialog box |
CSS Custom Properties
| Name | Description |
|---|---|
--wj-backdrop | Background (backdrop) colour |
--wj-backdrop-opacity | Backdrop transparency |
--wj-dialog-border-color | The colour of the edges of the dialog box |
--wj-dialog-border-radius | Rounding the edges of the dialog box |
--wj-dialog-border-style | Dialog box border style |
--wj-dialog-border-width | Dialog box border thickness |
--wj-dialog-height | Height of the dialog box |
--wj-dialog-margin-bottom | Bottom outer indent of the dialog window |
--wj-dialog-margin-end | Left outer indent of the dialog box |
--wj-dialog-margin-start | Right outer indent of the dialog box |
--wj-dialog-margin-top | Top outer indent of the dialog box |
--wj-dialog-padding | Internal dialog box indentation |
--wj-dialog-width | Dialog window width |
Slots
| Name | Description |
|---|---|
header | The content is placed in the header of the dialog box. |
footer | The content is placed in the footer of the dialog box. |