OLD | NEW |
1 # paper-dialog-behavior | 1 # paper-dialog-behavior |
2 | 2 |
3 `paper-dialog-behavior` implements behavior related to a Material Design dialog.
Use this behavior | 3 `paper-dialog-behavior` implements behavior related to a Material Design dialog.
Use this behavior |
4 and include `paper-dialog-common.css` in your element to implement a dialog. | 4 and include `paper-dialog-common.css` in your element to implement a dialog. |
5 | 5 |
6 `paper-dialog-common.css` provide styles for a header, content area, and an acti
on area for buttons. | 6 `paper-dialog-common.css` provide styles for a header, content area, and an acti
on area for buttons. |
7 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the | 7 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the |
8 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. | 8 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. |
9 | 9 |
10 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the | 10 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the |
11 dialog. | 11 dialog. |
12 | 12 |
13 For example, if `<paper-dialog-impl>` implements this behavior: | 13 For example, if `<paper-dialog-impl>` implements this behavior: |
14 | 14 |
15 ```html | 15 ```html |
16 <paper-dialog-impl> | 16 <paper-dialog-impl> |
17 <h2>Header</h2> | 17 <h2>Header</h2> |
18 <div>Dialog body</div> | 18 <div>Dialog body</div> |
19 <div class="buttons"> | 19 <div class="buttons"> |
20 <paper-button dialog-dismiss>Cancel</paper-button> | 20 <paper-button dialog-dismiss>Cancel</paper-button> |
21 <paper-button dialog-confirm>Accept</paper-button> | 21 <paper-button dialog-confirm>Accept</paper-button> |
22 </div> | 22 </div> |
23 </paper-dialog-impl> | 23 </paper-dialog-impl> |
24 ``` | 24 ``` |
OLD | NEW |