sp-dialog-wrapper
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
cancelLabel | cancel-label | string | '' | |
confirmLabel | confirm-label | string | '' | |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
dismissable | dismissable | boolean | false | |
error | error | boolean | false | |
footer | footer | string | '' | |
headline | headline | string | '' | |
headlineVisibility | headline-visibility | 'none' | undefined | | |
hero | hero | string | '' | |
heroLabel | hero-label | string | '' | |
mode | mode | 'fullscreen' | 'fullscreenTakeover' | undefined | | |
noDivider | no-divider | boolean | false | |
open | open | boolean | false | |
responsive | responsive | boolean | false | When set to true, fills screens smaller than 350px high and 400px wide with the full dialog. |
secondaryLabel | secondary-label | string | '' | |
size | size | 's' | 'm' | 'l' | undefined | | |
underlay | underlay | boolean | false |
Slots #
Name | Description |
---|---|
default slot | content for the dialog |
Events #
Name | Type | Description |
---|---|---|
cancel | Event | Announces that the "cancel" button has been clicked. |
close | Event | Announces that the dialog has been closed. |
confirm | Event | Announces that the "confirm" button has been clicked. |
secondary | Event | Announces that the "secondary" button has been clicked. |
Description #
sp-dialog-wrapper
supplies an attribute based interface for the managed custmization of an sp-dialog
element and the light DOM supplied to it. This is paired it with an underlay
attribute that opts-in to the use of an sp-underlay
element between your page content and the sp-dialog
that opens over it.
Usage #
yarn add @spectrum-web-components/dialog
Import the side effectful registration of <sp-dialog-wrapper>
via:
import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
When looking to leverage the DialogWrapper
base class as a type and/or for extension purposes, do so via:
import { DialogWrapper } from '@spectrum-web-components/dialog';
Example #
Small #
<overlay-trigger type="modal" placement="none">
<sp-dialog-wrapper
slot="click-content"
headline="Dialog title"
dismissable
underlay
footer="Content for footer"
>
Content of the dialog
</sp-dialog-wrapper>
<sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
</overlay-trigger>
Fullscreen Mode #
<overlay-trigger type="modal" placement="none">
<sp-dialog-wrapper
slot="click-content"
headline="Dialog title"
mode="fullscreen"
confirm-label="Keep Both"
secondary-label="Replace"
cancel-label="Cancel"
footer="Content for footer"
>
Content of the dialog
</sp-dialog-wrapper>
<sp-button
slot="trigger"
variant="primary"
onClick="
const overlayTrigger = this.parentElement;
const dialogWrapper = overlayTrigger.clickContent;
function handleEvent({type}) {
spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
dialogWrapper.open = false;
dialogWrapper.removeEventListener('confirm', handleEvent);
dialogWrapper.removeEventListener('secondary', handleEvent);
dialogWrapper.removeEventListener('cancel', handleEvent);
}
dialogWrapper.addEventListener('confirm', handleEvent);
dialogWrapper.addEventListener('secondary', handleEvent);
dialogWrapper.addEventListener('cancel', handleEvent);
"
>
Toggle Dialog
</sp-button>
</overlay-trigger>
Fullscreen Takeover Mode #
<overlay-trigger type="modal" placement="none">
<sp-dialog-wrapper
slot="click-content"
headline="Dialog title"
mode="fullscreenTakeover"
confirm-label="Keep Both"
secondary-label="Replace"
cancel-label="Cancel"
footer="Content for footer"
>
Content of the dialog
</sp-dialog-wrapper>
<sp-button
slot="trigger"
variant="primary"
onClick="
const overlayTrigger = this.parentElement;
const dialogWrapper = overlayTrigger.clickContent;
function handleEvent({type}) {
spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
dialogWrapper.open = false;
dialogWrapper.removeEventListener('confirm', handleEvent);
dialogWrapper.removeEventListener('secondary', handleEvent);
dialogWrapper.removeEventListener('cancel', handleEvent);
}
dialogWrapper.addEventListener('confirm', handleEvent);
dialogWrapper.addEventListener('secondary', handleEvent);
dialogWrapper.addEventListener('cancel', handleEvent);
"
>
Toggle Dialog
</sp-button>
</overlay-trigger>
Accessibility #
An sp-dialog-wrapper
element leverages the headline
attribute/property to label the dialog content for screen readers. The headline-visibility
attribute will accept a value of "none"
to suppress the headline visually.