Name: paper-dialog
Owner: PolymerElements
Description: A Material Design dialog
Created: 2015-05-13 20:56:47.0
Updated: 2018-05-11 13:30:05.0
Pushed: 2018-05-23 02:34:54.0
Homepage: https://www.webcomponents.org/element/PolymerElements/paper-dialog
Size: 131
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Material design: Dialogs
<paper-dialog>
is a dialog with Material Design styling and optional animations when it is
opened or closed. It provides styles for a header, content area, and an action area for buttons.
You can use the <paper-dialog-scrollable>
element (in its own repository) if you need a scrolling
content area. To autofocus a specific child element after opening the dialog, give it the autofocus
attribute. See Polymer.PaperDialogBehavior
and Polymer.IronOverlayBehavior
for specifics.
For example, the following code implements a dialog with a header, scrolling content area and
buttons. Focus will be given to the dialog-confirm
button when the dialog is opened.
er-dialog>
2>Header</h2>
aper-dialog-scrollable>
Lorem ipsum...
paper-dialog-scrollable>
iv class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Accept</paper-button>
div>
per-dialog>
paper-dialog-behavior 2.0
styles only direct h2
and .buttons
children of the dialog because of how ::slotted
works
(compound selector will select only top level nodes)neon-animation 2.0
doesn't import the Web Animations polyfill, so you'll have to import it (see Animations section)See the docs for Polymer.PaperDialogBehavior
for the custom properties available for styling
this element.
Set the entry-animation
and/or exit-animation
attributes to add an animation when the dialog
is opened or closed. See the documentation in
PolymerElements/neon-animation for more info.
For example:
k rel="import" href="../neon-animation/web-animations.html">
k rel="import" href="../neon-animation/animations/scale-up-animation.html">
k rel="import" href="../neon-animation/animations/fade-out-animation.html">
er-dialog entry-animation="scale-up-animation"
exit-animation="fade-out-animation">
2>Header</h2>
iv>Dialog body</div>
per-dialog>
See the docs for Polymer.PaperDialogBehavior
for accessibility features implemented by this
element.