third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/README.md - Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/README.md

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml

Patch Set: local-state.html Created 5 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« components/proximity_auth/webui/resources/local-state.html ('K') | « third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 # paper-dialog-behavior

2	1

3 `paper-dialog-behavior` implements behavior related to a Material Design dialog. Use this behavior	2 <!---

4 and include `paper-dialog-common.css` in your element to implement a dialog.	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 -->

	11

	12 [![Build Status](https://travis-ci.org/PolymerElements/paper-dialog-behavior.svg ?branch=master)](https://travis-ci.org/PolymerElements/paper-dialog-behavior)

	13

	14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-dialog- behavior)_

	15

	16

	17 ##Polymer.PaperDialogBehavior

	18

	19

	20 Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a M aterial Design

	21 dialog.

	22

	23 For example, if `<paper-dialog-impl>` implements this behavior:

	24

	25 <paper-dialog-impl>

	26 <h2>Header</h2>

	27 <div>Dialog body</div>

	28 <div class="buttons">

	29 <paper-button dialog-dismiss>Cancel</paper-button>

	30 <paper-button dialog-confirm>Accept</paper-button>

	31 </div>

	32 </paper-dialog-impl>

5	33

6 `paper-dialog-common.css` provide styles for a header, content area, and an acti on area for buttons.	34 `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	35 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.	36 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin g content area.

9	37

10 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the	38 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the

11 dialog.	39 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas on` will update

	40 to include `confirmed: true`.

12	41

13 For example, if `<paper-dialog-impl>` implements this behavior:	42 ### Styling

14	43

15 ```html	44 The following custom properties and mixins are available for styling.

16 <paper-dialog-impl>	45

17 <h2>Header</h2>	46 Custom property \| Description \| Default

18 <div>Dialog body</div>	47 ----------------\|-------------\|----------

19 <div class="buttons">	48 `--paper-dialog-background-color` \| Dialog background color \| `--primary-background-color`

20 <paper-button dialog-dismiss>Cancel</paper-button>	49 `--paper-dialog-color` \| Dialog foreground color \| `--primary-text-color`

21 <paper-button dialog-confirm>Accept</paper-button>	50 `--paper-dialog` \| Mixin applied to the dialog \| `{}`

22 </div>	51 `--paper-dialog-title` \| Mixin applied to the title (`<h2>`) element \| `{}`

23 </paper-dialog-impl>	52 `--paper-dialog-button-color` \| Button area foreground color \| `--default-primary-color`

24 ```	53

	54 ### Accessibility

	55

	56 This element has `role="dialog"` by default. Depending on the context, it may be more appropriate

	57 to override this attribute with `role="alertdialog"`.

	58

	59 If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element.

	60 It will also ensure that focus remains in the dialog.

	61

	62 The `aria-labelledby` attribute will be set to the header element, if one exists .

	63

	64

OLD	NEW