• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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<!--
16Material 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
19opened or closed. It provides styles for a header, content area, and an action area for buttons.
20You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling
21content area. See `Polymer.PaperDialogBehavior` for specifics.
22
23For example, the following code implements a dialog with a header, scrolling content area and
24buttons.
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
39See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
40this element.
41
42### Animations
43
44Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
45is opened or closed. See the documentation in
46[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
47
48For 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
61See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
62element.
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