| 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 |