1 2<!--- 3 4This README is automatically generated from the comments in these files: 5paper-dialog.html 6 7Edit those files, and our readme bot will duplicate them over here! 8Edit this file, and the bot will squash your changes :) 9 10The bot does some handling of markdown. Please file a bug if it does the wrong 11thing! 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 22Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html) 23 24`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is 25opened or closed. It provides styles for a header, content area, and an action area for buttons. 26You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling 27content area. See `Polymer.PaperDialogBehavior` for specifics. 28 29For example, the following code implements a dialog with a header, scrolling content area and 30buttons. 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 47See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling 48this element. 49 50### Animations 51 52Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog 53is opened or closed. See the documentation in 54[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info. 55 56For 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 71See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this 72element. 73 74 75
){kind=link}