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.
<paper-dialog>
<h2>Header</h2>
<paper-dialog-scrollable>
Lorem ipsum...
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Accept</paper-button>
</div>
</paper-dialog>
paper-dialog-behavior 2.0
styles only directh2
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:
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
<paper-dialog entry-animation="scale-up-animation"
exit-animation="fade-out-animation">
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
See the docs for Polymer.PaperDialogBehavior
for accessibility features implemented by this
element.