third_party/polymer/v1_0/components/paper-dialog/paper-dialog.html

   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-styles/paper-styles.html">
  15
  16 <!--
  17 `<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
  18 opened or closed. It provides styles for a header, content area, and an action area for buttons.
  19 You can use the `<paper-dialog-scrollable` element (in its own repository) if you need a scrolling
  20 content area. See `Polymer.PaperDialogBehavior` for specifics.
  21
  22 For example, the following code implements a dialog with a header, scrolling content area and
  23 buttons.
  24
  25     <paper-dialog>
  26       <h2>Header</h2>
  27       <paper-dialog-scrollable>
  28         Lorem ipsum...
  29       </paper-dialog-scrollable>
  30       <div class="buttons">
  31         <paper-button dialog-dismiss>Cancel</paper-button>
  32         <paper-button dialog-confirm>Accept</paper-button>
  33       </div>
  34     </paper-dialog>
  35
  36 ### Styling
  37
  38 See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
  39 this element.
  40
  41 ### Animations
  42
  43 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
  44 is opened or closed. See the documentation in
  45 [PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
  46
  47 For example:
  48
  49     <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
  50     <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
  51
  52     <paper-dialog entry-animation="scale-up-animation"
  53                   exit-animation="fade-out-animation">
  54       <h2>Header</h2>
  55       <div>Dialog body</div>
  56     </paper-dialog>
  57
  58 ### Accessibility
  59
  60 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
  61 element.
  62
  63 @group Paper Elements
  64 @element paper-dialog
  65 @hero hero.svg
  66 @demo demo/index.html
  67 -->
  68
  69 <dom-module id="paper-dialog">
  70
  71   <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css">
  72
  73   <template>
  74     <content></content>
  75   </template>
  76
  77 </dom-module>
  78
  79 <script>
  80
  81 (function() {
  82
  83   Polymer({
  84
  85     is: 'paper-dialog',
  86
  87     behaviors: [
  88       Polymer.PaperDialogBehavior,
  89       Polymer.NeonAnimationRunnerBehavior
  90     ],
  91
  92     listeners: {
  93       'neon-animation-finish': '_onNeonAnimationFinish'
  94     },
  95
  96     _renderOpened: function() {
  97       if (this.withBackdrop) {
  98         this.backdropElement.open();
  99       }
 100       this.playAnimation('entry');
 101     },
 102
 103     _renderClosed: function() {
 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>