OLD | NEW |
| (Empty) |
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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt | |
9 --><html><head><link rel="import" href="../polymer/polymer.html"> | |
10 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> | |
11 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html"> | |
12 <link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.htm
l"> | |
13 <!-- | |
14 Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs
.html) | |
15 | |
16 `<paper-dialog>` is a dialog with Material Design styling and optional animation
s when it is | |
17 opened or closed. It provides styles for a header, content area, and an action a
rea for buttons. | |
18 You can use the `<paper-dialog-scrollable>` element (in its own repository) if y
ou need a scrolling | |
19 content area. To autofocus a specific child element after opening the dialog, gi
ve it the `autofocus` | |
20 attribute. See `Polymer.PaperDialogBehavior` and `Polymer.IronOverlayBehavior` f
or specifics. | |
21 | |
22 For example, the following code implements a dialog with a header, scrolling con
tent area and | |
23 buttons. Focus will be given to the `dialog-confirm` button when the dialog is o
pened. | |
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 autofocus>Accept</paper-button> | |
33 </div> | |
34 </paper-dialog> | |
35 | |
36 ### Styling | |
37 | |
38 See the docs for `Polymer.PaperDialogBehavior` for the custom properties availab
le 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-animati
on) for more info. | |
46 | |
47 For example: | |
48 | |
49 <link rel="import" href="components/neon-animation/animations/scale-up-anima
tion.html"> | |
50 <link rel="import" href="components/neon-animation/animations/fade-out-anima
tion.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 implem
ented 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 </head><body><dom-module id="paper-dialog"> | |
70 <template> | |
71 <style include="paper-dialog-shared-styles"></style> | |
72 <content></content> | |
73 </template> | |
74 </dom-module> | |
75 | |
76 <script src="paper-dialog-extracted.js"></script></body></html> | |
OLD | NEW |