OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-dialog.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
11 thing! https://github.com/PolymerLabs/tedium/issues | |
12 | |
13 --> | |
14 | |
15 [](https://travis-ci.org/PolymerElements/paper-dialog) | |
16 | |
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-dialog)
_ | |
18 | |
19 | |
20 ##<paper-dialog> | |
21 | |
22 Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs
.html) | |
23 | |
24 `<paper-dialog>` is a dialog with Material Design styling and optional animation
s when it is | |
25 opened or closed. It provides styles for a header, content area, and an action a
rea for buttons. | |
26 You can use the `<paper-dialog-scrollable>` element (in its own repository) if y
ou need a scrolling | |
27 content area. See `Polymer.PaperDialogBehavior` for specifics. | |
28 | |
29 For example, the following code implements a dialog with a header, scrolling con
tent area and | |
30 buttons. | |
31 | |
32 ```html | |
33 <paper-dialog> | |
34 <h2>Header</h2> | |
35 <paper-dialog-scrollable> | |
36 Lorem ipsum... | |
37 </paper-dialog-scrollable> | |
38 <div class="buttons"> | |
39 <paper-button dialog-dismiss>Cancel</paper-button> | |
40 <paper-button dialog-confirm>Accept</paper-button> | |
41 </div> | |
42 </paper-dialog> | |
43 ``` | |
44 | |
45 ### Styling | |
46 | |
47 See the docs for `Polymer.PaperDialogBehavior` for the custom properties availab
le for styling | |
48 this element. | |
49 | |
50 ### Animations | |
51 | |
52 Set the `entry-animation` and/or `exit-animation` attributes to add an animation
when the dialog | |
53 is opened or closed. See the documentation in | |
54 [PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animati
on) for more info. | |
55 | |
56 For example: | |
57 | |
58 ```html | |
59 <link rel="import" href="components/neon-animation/animations/scale-up-animation
.html"> | |
60 <link rel="import" href="components/neon-animation/animations/fade-out-animation
.html"> | |
61 | |
62 <paper-dialog entry-animation="scale-up-animation" | |
63 exit-animation="fade-out-animation"> | |
64 <h2>Header</h2> | |
65 <div>Dialog body</div> | |
66 </paper-dialog> | |
67 ``` | |
68 | |
69 ### Accessibility | |
70 | |
71 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implem
ented by this | |
72 element. | |
73 | |
74 | |
OLD | NEW |