davidmaxwaterman / paper-dialog Goto Github PK

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 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:

<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.