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 |