76 lines
2.5 KiB
Markdown
76 lines
2.5 KiB
Markdown
|
|
||
|
|
<!---
|
||
|
|
|
||
|
|
This README is automatically generated from the comments in these files:
|
||
|
|
paper-dialog.html
|
||
|
|
|
||
|
|
Edit those files, and our readme bot will duplicate them over here!
|
||
|
|
Edit this file, and the bot will squash your changes :)
|
||
|
|
|
||
|
|
The bot does some handling of markdown. Please file a bug if it does the wrong
|
||
|
|
thing! https://github.com/PolymerLabs/tedium/issues
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
[](https://travis-ci.org/PolymerElements/paper-dialog)
|
||
|
|
|
||
|
|
_[Demo and API docs](https://elements.polymer-project.org/elements/paper-dialog)_
|
||
|
|
|
||
|
|
|
||
|
|
##<paper-dialog>
|
||
|
|
|
||
|
|
Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
|
||
|
|
|
||
|
|
`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
|
||
|
|
opened or closed. It provides styles for a header, content area, and an action area for buttons.
|
||
|
|
You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling
|
||
|
|
content area. To autofocus a specific child element after opening the dialog, give it the `autofocus`
|
||
|
|
attribute. See `Polymer.PaperDialogBehavior` and `Polymer.IronOverlayBehavior` for specifics.
|
||
|
|
|
||
|
|
For example, the following code implements a dialog with a header, scrolling content area and
|
||
|
|
buttons. Focus will be given to the `dialog-confirm` button when the dialog is opened.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<paper-dialog>
|
||
|
|
<h2>Header</h2>
|
||
|
|
<paper-dialog-scrollable>
|
||
|
|
Lorem ipsum...
|
||
|
|
</paper-dialog-scrollable>
|
||
|
|
<div class="buttons">
|
||
|
|
<paper-button dialog-dismiss>Cancel</paper-button>
|
||
|
|
<paper-button dialog-confirm autofocus>Accept</paper-button>
|
||
|
|
</div>
|
||
|
|
</paper-dialog>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Styling
|
||
|
|
|
||
|
|
See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
|
||
|
|
this element.
|
||
|
|
|
||
|
|
### Animations
|
||
|
|
|
||
|
|
Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
|
||
|
|
is opened or closed. See the documentation in
|
||
|
|
[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
|
||
|
|
|
||
|
|
For example:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
|
||
|
|
<link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
|
||
|
|
|
||
|
|
<paper-dialog entry-animation="scale-up-animation"
|
||
|
|
exit-animation="fade-out-animation">
|
||
|
|
<h2>Header</h2>
|
||
|
|
<div>Dialog body</div>
|
||
|
|
</paper-dialog>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Accessibility
|
||
|
|
|
||
|
|
See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
|
||
|
|
element.
|
||
|
|
|
||
|
|
|