1 <!-- 2 @license 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 --> 10 11 <link rel="import" href="../polymer/polymer.html"> 12 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> 13 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html"> 14 <link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html"> 15 <!-- 16 Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html) 17 18 `<paper-dialog>` is a dialog with Material Design styling and optional animations when it is 19 opened or closed. It provides styles for a header, content area, and an action area for buttons. 20 You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling 21 content area. See `Polymer.PaperDialogBehavior` for specifics. 22 23 For example, the following code implements a dialog with a header, scrolling content area and 24 buttons. 25 26 <paper-dialog> 27 <h2>Header</h2> 28 <paper-dialog-scrollable> 29 Lorem ipsum... 30 </paper-dialog-scrollable> 31 <div class="buttons"> 32 <paper-button dialog-dismiss>Cancel</paper-button> 33 <paper-button dialog-confirm>Accept</paper-button> 34 </div> 35 </paper-dialog> 36 37 ### Styling 38 39 See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling 40 this element. 41 42 ### Animations 43 44 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog 45 is opened or closed. See the documentation in 46 [PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info. 47 48 For example: 49 50 <link rel="import" href="components/neon-animation/animations/scale-up-animation.html"> 51 <link rel="import" href="components/neon-animation/animations/fade-out-animation.html"> 52 53 <paper-dialog entry-animation="scale-up-animation" 54 exit-animation="fade-out-animation"> 55 <h2>Header</h2> 56 <div>Dialog body</div> 57 </paper-dialog> 58 59 ### Accessibility 60 61 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this 62 element. 63 64 @group Paper Elements 65 @element paper-dialog 66 @hero hero.svg 67 @demo demo/index.html 68 --> 69 70 <dom-module id="paper-dialog"> 71 <template> 72 <style include="paper-dialog-shared-styles"></style> 73 <content></content> 74 </template> 75 </dom-module> 76 77 <script> 78 79 (function() { 80 81 Polymer({ 82 83 is: 'paper-dialog', 84 85 behaviors: [ 86 Polymer.PaperDialogBehavior, 87 Polymer.NeonAnimationRunnerBehavior 88 ], 89 90 listeners: { 91 'neon-animation-finish': '_onNeonAnimationFinish' 92 }, 93 94 _renderOpened: function() { 95 this.cancelAnimation(); 96 if (this.withBackdrop) { 97 this.backdropElement.open(); 98 } 99 this.playAnimation('entry'); 100 }, 101 102 _renderClosed: function() { 103 this.cancelAnimation(); 104 if (this.withBackdrop) { 105 this.backdropElement.close(); 106 } 107 this.playAnimation('exit'); 108 }, 109 110 _onNeonAnimationFinish: function() { 111 if (this.opened) { 112 this._finishRenderOpened(); 113 } else { 114 this._finishRenderClosed(); 115 } 116 } 117 118 }); 119 120 })(); 121 122 </script> 123
