paper-dialog.html 3.38 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../paper-styles/paper-styles.html">

`<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. See `Polymer.PaperDialogBehavior` for specifics.

For example, the following code implements a dialog with a header, scrolling content area and

        Lorem ipsum...
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>Accept</paper-button>

### Styling

See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
this element.

### Animations

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="components/neon-animation/animations/scale-up-animation.html">
    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">

    <paper-dialog entry-animation="scale-up-animation"
      <div>Dialog body</div>

### Accessibility

See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this

@group Paper Elements
@element paper-dialog
@hero hero.svg
@demo demo/index.html

<dom-module id="paper-dialog">

  <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css">




(function() {


    is: 'paper-dialog',

    behaviors: [

    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish'

    _renderOpened: function() {
      if (this.withBackdrop) {;

    _renderClosed: function() {
      if (this.withBackdrop) {

    _onNeonAnimationFinish: function() {
      if (this.opened) {
      } else {