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)<paper-dialog>
uses CSS animation keyframes instead ofneon-animation
, (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. Included in the component are:
- fade-in-animation
- fade-out-animation
- scale-up-animation
- scale-down-animation
These animations are not based on the deprecated neon-animation
component, and use CSS keyframe animations.
This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the entry/ext-animation
, e.g.
<style>
@keyframes appear-from-top {
0% {
transform: translateY(-2000px);
opacity: 0;
}
10% {
opacity: 0.2;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.appear-from-top {
animation-name: appear-from-top;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
animation-duration: 800ms;
}
</style>
<paper-dialog entry-animation="appear-from-top"
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.