<!-- @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-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 buttons. <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>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"> <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css"> <template> <content></content> </template> </dom-module> <script> (function() { Polymer({ is: 'paper-dialog', behaviors: [ Polymer.PaperDialogBehavior, Polymer.NeonAnimationRunnerBehavior ], listeners: { 'neon-animation-finish': '_onNeonAnimationFinish' }, _renderOpened: function() { if (this.withBackdrop) { this.backdropElement.open(); } this.playAnimation('entry'); }, _renderClosed: function() { if (this.withBackdrop) { this.backdropElement.close(); } this.playAnimation('exit'); }, _onNeonAnimationFinish: function() { if (this.opened) { this._finishRenderOpened(); } else { this._finishRenderClosed(); } } }); })(); </script>