sp-dialog-wrapper
NPM
0.42.2
Spectrum
View guidelines
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
dismissable
dismissable
boolean
false
error
error
boolean
false
footer
footer
string
''
headline
headline
string
''
hero
hero
string
''
mode
mode
'fullscreen' | 'fullscreenTakeover' | undefined
open
open
boolean
false
responsive
responsive
boolean
false
size
size
's' | 'm' | 'l' | undefined
underlay
underlay
boolean
false
Slots #
default slot
Events #
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.
undefined
TransitionEvent
Description #
sp-dialog-wrapper
supplies an attribute based interface for the managed customization 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"> <sp-dialog-wrapper slot="click-content" headline="Dialog title" dismissable dismiss-label="Close" 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"> <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"> <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.