liiir1985 7f62dcda9f | ||
---|---|---|
.. | ||
.github | ||
demo | ||
test | ||
.bower.json | ||
.travis.yml | ||
CONTRIBUTING.md | ||
README.md | ||
bower.json | ||
hero.svg | ||
index.html | ||
paper-dialog-behavior.html | ||
paper-dialog-common.css | ||
paper-dialog-shared-styles.html |
README.md
##Polymer.PaperDialogBehavior
Use Polymer.PaperDialogBehavior
and paper-dialog-shared-styles.html
to implement a Material Design
dialog.
For example, if <paper-dialog-impl>
implements this behavior:
<paper-dialog-impl>
<h2>Header</h2>
<div>Dialog body</div>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog-impl>
paper-dialog-shared-styles.html
provide styles for a header, content area, and an action area for buttons.
Use the <h2>
tag for the header and the buttons
class for the action area. You can use the
paper-dialog-scrollable
element (in its own repository) if you need a scrolling content area.
Use the dialog-dismiss
and dialog-confirm
attributes on interactive controls to close the
dialog. If the user dismisses the dialog with dialog-confirm
, the closingReason
will update
to include confirmed: true
.
Accessibility
This element has role="dialog"
by default. Depending on the context, it may be more appropriate
to override this attribute with role="alertdialog"
.
If modal
is set, the element will prevent the focus from exiting the element.
It will also ensure that focus remains in the dialog.