Dialog
Installation
Usage
<rh-dialog trigger="standard-trigger">
<h2 slot="header">Leave page</h2>
<p>If you leave the page, any unsaved information will be lost.</p>
<rh-button slot="footer">Leave</rh-button>
<rh-button slot="footer" variant="tertiary">Cancel</rh-button>
</rh-dialog>
<rh-button id="standard-trigger">Open modal dialog</rh-button>rh-dialog
| Slot Name | Description |
|---|---|
|
The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the dialog window (to the left of the close button). Otherwise it will appear beneath the header. |
header |
The header is an optional slot that appears at the top of the dialog window. It should be a header tag (h2-h6). |
footer |
Optional footer content. Good place to put action buttons. |
| DOM Property | Description | Type | Default |
|---|---|---|---|
variant |
The |
|
|
position |
|
|
|
open |
|
|
|
trigger |
Optional ID of the trigger element |
|
|
type |
|
|
| Method Name | Description |
|---|---|
setTrigger(element: HTMLElement) |
|
toggle() |
Manually toggles the dialog. |
show() |
Manually opens the dialog. |
showModal() |
|
close(returnValue: string) |
Manually closes the dialog. |
| Event Name | Description |
|---|---|
open |
Fires when a user clicks on the trigger or manually opens a dialog. |
close |
Fires when either a user clicks on either the close button or the overlay or manually closes a dialog. |
cancel |
| Part Name | Description |
|---|---|
overlay |
The dialog overlay which lies under the dialog and above the page body |
dialog |
The dialog element |
content |
The container for the dialog content |
header |
The container for the optional dialog header |
description |
The container for the optional dialog description in the header |
close-button |
The dialog's close button |
footer |
Actions footer container |
| CSS Property | Description | Default |
|---|---|---|
--rh-dialog-video-aspect-ratio |
—
|
|
--rh-dialog-close-button-color |
Sets the dialog close button color. |
var(--rh-color-icon-secondary-on-dark, #ffffff)
|
None
