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