| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <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-dialog-behavior/paper-dialog-shared-styles.html"> |
| <!-- |
| Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.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. 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> |
| |
| ### 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](https://github.com/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" |
| exit-animation="fade-out-animation"> |
| <h2>Header</h2> |
| <div>Dialog body</div> |
| </paper-dialog> |
| |
| ### Accessibility |
| |
| See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this |
| element. |
| |
| @group Paper Elements |
| @element paper-dialog |
| @hero hero.svg |
| @demo demo/index.html |
| --> |
| |
| <dom-module id="paper-dialog"> |
| <template> |
| <style include="paper-dialog-shared-styles"></style> |
| <content></content> |
| </template> |
| </dom-module> |
| |
| <script> |
| |
| (function() { |
| |
| Polymer({ |
| |
| is: 'paper-dialog', |
| |
| behaviors: [ |
| Polymer.PaperDialogBehavior, |
| Polymer.NeonAnimationRunnerBehavior |
| ], |
| |
| listeners: { |
| 'neon-animation-finish': '_onNeonAnimationFinish' |
| }, |
| |
| _renderOpened: function() { |
| this.cancelAnimation(); |
| this.playAnimation('entry'); |
| }, |
| |
| _renderClosed: function() { |
| this.cancelAnimation(); |
| this.playAnimation('exit'); |
| }, |
| |
| _onNeonAnimationFinish: function() { |
| if (this.opened) { |
| this._finishRenderOpened(); |
| } else { |
| this._finishRenderClosed(); |
| } |
| } |
| |
| }); |
| |
| })(); |
| |
| </script> |