| OLD | NEW |
| (Empty) |
| 1 | |
| 2 <!--- | |
| 3 | |
| 4 This README is automatically generated from the comments in these files: | |
| 5 paper-dialog-behavior.html | |
| 6 | |
| 7 Edit those files, and our readme bot will duplicate them over here! | |
| 8 Edit this file, and the bot will squash your changes :) | |
| 9 | |
| 10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
| 11 thing! https://github.com/PolymerLabs/tedium/issues | |
| 12 | |
| 13 --> | |
| 14 | |
| 15 [](https://travis-ci.org/PolymerElements/paper-dialog-behavior) | |
| 16 | |
| 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-dialog-
behavior)_ | |
| 18 | |
| 19 | |
| 20 ##Polymer.PaperDialogBehavior | |
| 21 | |
| 22 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design | |
| 23 dialog. | |
| 24 | |
| 25 For example, if `<paper-dialog-impl>` implements this behavior: | |
| 26 | |
| 27 ```html | |
| 28 <paper-dialog-impl> | |
| 29 <h2>Header</h2> | |
| 30 <div>Dialog body</div> | |
| 31 <div class="buttons"> | |
| 32 <paper-button dialog-dismiss>Cancel</paper-button> | |
| 33 <paper-button dialog-confirm>Accept</paper-button> | |
| 34 </div> | |
| 35 </paper-dialog-impl> | |
| 36 ``` | |
| 37 | |
| 38 `paper-dialog-shared-styles.html` provide styles for a header, content area, and
an action area for buttons. | |
| 39 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the | |
| 40 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. | |
| 41 | |
| 42 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the | |
| 43 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas
on` will update | |
| 44 to include `confirmed: true`. | |
| 45 | |
| 46 ### Styling | |
| 47 | |
| 48 The following custom properties and mixins are available for styling. | |
| 49 | |
| 50 | Custom property | Description | Default | | |
| 51 | --- | --- | --- | | |
| 52 | `--paper-dialog-background-color` | Dialog background color | `--primary-backg
round-color` | | |
| 53 | `--paper-dialog-color` | Dialog foreground color | `--primary-text-color` | | |
| 54 | `--paper-dialog` | Mixin applied to the dialog | `{}` | | |
| 55 | `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element | `{}` | | |
| 56 | `--paper-dialog-button-color` | Button area foreground color | `--default-prim
ary-color` | | |
| 57 | |
| 58 ### Accessibility | |
| 59 | |
| 60 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate | |
| 61 to override this attribute with `role="alertdialog"`. | |
| 62 | |
| 63 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. | |
| 64 It will also ensure that focus remains in the dialog. | |
| 65 | |
| 66 The `aria-labelledby` attribute will be set to the header element, if one exists
. | |
| 67 | |
| 68 | |
| OLD | NEW |