Dialog
<sc-dialog></sc-dialog>
This component let users create dialog.
- Preview
- Code
<sc-dialog label="Dialog header"></sc-dialog>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| label | The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. | string | '' |
| noHeader | Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog. | boolean | false |
| open | Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. | boolean | false |
Events
| Event | Description | Type |
|---|---|---|
scAfterHide | CustomEvent<void> | |
scAfterShow | CustomEvent<void> | |
scHide | CustomEvent<void> | |
scInitialFocus | CustomEvent<void> | |
scRequestClose | Request close event | CustomEvent<"close-button" | "keyboard" | "overlay"> |
scShow | CustomEvent<void> |
Shadow Parts
| Part | Description |
|---|---|
base | |
body | |
close-button | |
footer | |
header | |
overlay | |
panel | |
title |