Name: paper-dialog-behavior
Owner: PolymerElements
Description: Makes an element a Material Design dialog
Created: 2015-04-29 21:40:00.0
Updated: 2018-05-04 18:41:22.0
Pushed: 2018-05-23 02:35:04.0
Homepage: null
Size: 164
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Use Polymer.PaperDialogBehavior
and paper-dialog-shared-styles.html
to implement a Material Design
dialog.
For example, if <paper-dialog-impl>
implements this behavior:
er-dialog-impl>
<h2>Header</h2>
<div>Dialog body</div>
<div class="paper-dialog-buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
per-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 paper-dialog-buttons
or 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
.
paper-dialog-shared-styles
styles direct h2
and .buttons
children of the dialog because of how ::slotted
works
(compound selector will select only top level nodes)paper-dialog-common.css
as it's a duplicate of paper-dialog-shared-styles.html
.
Import the shared styles via <style include="paper-dialog-shared-styles">
(see example)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.