diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-dialog/README.md')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-dialog/README.md | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-dialog/README.md b/catapult/third_party/polymer/components/paper-dialog/README.md new file mode 100644 index 00000000..a958f067 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-dialog/README.md @@ -0,0 +1,75 @@ + +<!--- + +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. + + |