Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(786)

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

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 months 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
OLDNEW
1 1
2 <!--- 2 <!---
3 3
4 This README is automatically generated from the comments in these files: 4 This README is automatically generated from the comments in these files:
5 paper-icon-item.html paper-item-behavior.html paper-item-body.html paper-item .html 5 paper-icon-item.html paper-item-behavior.html paper-item-body.html paper-item .html
6 6
7 Edit those files, and our readme bot will duplicate them over here! 7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :) 8 Edit this file, and the bot will squash your changes :)
9 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
10 --> 13 -->
11 14
12 [![Build Status](https://travis-ci.org/PolymerElements/paper-item.svg?branch=mas ter)](https://travis-ci.org/PolymerElements/paper-item) 15 [![Build status](https://travis-ci.org/PolymerElements/paper-item.svg?branch=mas ter)](https://travis-ci.org/PolymerElements/paper-item)
13 16
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-item)_ 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-item)_
15 18
16 19
17 ##&lt;paper-item&gt; 20 ##&lt;paper-item&gt;
18 21
19
20 Material design: [Lists](https://www.google.com/design/spec/components/lists.htm l) 22 Material design: [Lists](https://www.google.com/design/spec/components/lists.htm l)
21 23
22 `<paper-item>` is an interactive list item. By default, it is a horizontal flexb ox. 24 `<paper-item>` is an interactive list item. By default, it is a horizontal flexb ox.
23 25
24 <paper-item>Item</paper-item> 26 ```html
27 <paper-item>Item</paper-item>
28 ```
25 29
26 Use this element with `<paper-item-body>` to make Material Design styled two-lin e and three-line 30 Use this element with `<paper-item-body>` to make Material Design styled two-lin e and three-line
27 items. 31 items.
28 32
29 <paper-item> 33 ```html
30 <paper-item-body two-line> 34 <paper-item>
31 <div>Show your status</div> 35 <paper-item-body two-line>
32 <div secondary>Your status is visible to everyone</div> 36 <div>Show your status</div>
33 </paper-item-body> 37 <div secondary>Your status is visible to everyone</div>
34 <iron-icon icon="warning"></iron-icon> 38 </paper-item-body>
35 </paper-item> 39 <iron-icon icon="warning"></iron-icon>
40 </paper-item>
41 ```
36 42
37 ### Styling 43 ### Styling
38 44
39 The following custom properties and mixins are available for styling: 45 The following custom properties and mixins are available for styling:
40 46
41 Custom property | Description | D efault 47 | Custom property | Description | Default |
42 ------------------------------|----------------------------------------------|-- -------- 48 | --- | --- | --- |
43 `--paper-item-min-height` | Minimum height of the item | ` 48px` 49 | `--paper-item-min-height` | Minimum height of the item | `48px` |
44 `--paper-item` | Mixin applied to the item | ` {}` 50 | `--paper-item` | Mixin applied to the item | `{}` |
45 `--paper-item-selected-weight`| The font weight of a selected item | ` bold` 51 | `--paper-item-selected-weight` | The font weight of a selected item | `bold` |
46 `--paper-item-selected` | Mixin applied to selected paper-items | ` {}` 52 | `--paper-item-selected` | Mixin applied to selected paper-items | `{}` |
47 `--paper-item-disabled-color` | The color for disabled paper-items | ` --disabled-text-color` 53 | `--paper-item-disabled-color` | The color for disabled paper-items | `--disabl ed-text-color` |
48 `--paper-item-disabled` | Mixin applied to disabled paper-items | ` {}` 54 | `--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` |
49 `--paper-item-focused` | Mixin applied to focused paper-items | ` {}` 55 | `--paper-item-focused` | Mixin applied to focused paper-items | `{}` |
50 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | ` {}` 56 | `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` |
51 57
52 ### Accessibility 58 ### Accessibility
53 59
54 This element has `role="listitem"` by default. Depending on usage, it may be mor e appropriate to set 60 This element has `role="listitem"` by default. Depending on usage, it may be mor e appropriate to set
55 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`. 61 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
56 62
57 <paper-item role="menuitemcheckbox"> 63 ```html
58 <paper-item-body> 64 <paper-item role="menuitemcheckbox">
59 Show your status 65 <paper-item-body>
60 </paper-item-body> 66 Show your status
61 <paper-checkbox></paper-checkbox> 67 </paper-item-body>
62 </paper-item> 68 <paper-checkbox></paper-checkbox>
69 </paper-item>
70 ```
63 71
64 72
65 73
66 ##&lt;paper-icon-item&gt; 74 ##&lt;paper-icon-item&gt;
67 75
68
69 `<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list 76 `<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list
70 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of 77 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
71 varying widths, but you want the item bodies to line up. Use this like a `<paper -item>`. The child 78 varying widths, but you want the item bodies to line up. Use this like a `<paper -item>`. The child
72 node with the attribute `item-icon` is placed in the icon area. 79 node with the attribute `item-icon` is placed in the icon area.
73 80
74 <paper-icon-item> 81 ```html
75 <iron-icon icon="favorite" item-icon></iron-icon> 82 <paper-icon-item>
76 Favorite 83 <iron-icon icon="favorite" item-icon></iron-icon>
77 </paper-icon-item> 84 Favorite
78 <paper-icon-item> 85 </paper-icon-item>
79 <div class="avatar" item-icon></div> 86 <paper-icon-item>
80 Avatar 87 <div class="avatar" item-icon></div>
81 </paper-icon-item> 88 Avatar
89 </paper-icon-item>
90 ```
82 91
83 ### Styling 92 ### Styling
84 93
85 The following custom properties and mixins are available for styling: 94 The following custom properties and mixins are available for styling:
86 95
87 Custom property | Description | Default 96 | Custom property | Description | Default |
88 ------------------------------|------------------------------------------------| ---------- 97 | --- | --- | --- |
89 `--paper-item-icon-width` | Width of the icon area | `56px` 98 | `--paper-item-icon-width` | Width of the icon area | `56px` |
90 `--paper-icon-item` | Mixin applied to the item | `{}` 99 | `--paper-item-icon` | Mixin applied to the icon area | `{}` |
91 `--paper-item-selected-weight`| The font weight of a selected item | `bold` 100 | `--paper-icon-item` | Mixin applied to the item | `{}` |
92 `--paper-item-selected` | Mixin applied to selected paper-items | `{}` 101 | `--paper-item-selected-weight` | The font weight of a selected item | `bold` |
93 `--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color` 102 | `--paper-item-selected` | Mixin applied to selected paper-items | `{}` |
94 `--paper-item-disabled` | Mixin applied to disabled paper-items | ` {}` 103 | `--paper-item-disabled-color` | The color for disabled paper-items | `--disabl ed-text-color` |
95 `--paper-item-focused` | Mixin applied to focused paper-items | ` {}` 104 | `--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` |
96 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | ` {}` 105 | `--paper-item-focused` | Mixin applied to focused paper-items | `{}` |
106 | `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` |
107
97 108
98 109
99 ##&lt;paper-item-body&gt; 110 ##&lt;paper-item-body&gt;
100 111
101
102 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or 112 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
103 three- line items. It is a flex item that is a vertical flexbox. 113 three- line items. It is a flex item that is a vertical flexbox.
104 114
105 <paper-item> 115 ```html
106 <paper-item-body two-line> 116 <paper-item>
107 <div>Show your status</div> 117 <paper-item-body two-line>
108 <div secondary>Your status is visible to everyone</div> 118 <div>Show your status</div>
109 </paper-item-body> 119 <div secondary>Your status is visible to everyone</div>
110 </paper-item> 120 </paper-item-body>
121 </paper-item>
122 ```
111 123
112 The child elements with the `secondary` attribute is given secondary text stylin g. 124 The child elements with the `secondary` attribute is given secondary text stylin g.
113 125
114 ### Styling 126 ### Styling
115 127
116 The following custom properties and mixins are available for styling: 128 The following custom properties and mixins are available for styling:
117 129
118 Custom property | Description | Default 130 | Custom property | Description | Default |
119 ----------------|-------------|---------- 131 | --- | --- | --- |
120 `--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px` 132 | `--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px` |
121 `--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px` 133 | `--paper-item-body-three-line-min-height` | Minimum height of a three-line ite m | `88px` |
122 `--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color` 134 | `--paper-item-body-secondary-color` | Foreground color for the `secondary` are a | `--secondary-text-color` |
123 `--paper-item-body-secondary` | Mixin applied to the `secondary` are a | `{}` 135 | `--paper-item-body-secondary` | Mixin applied to the `secondary` area | `{}` |
124 136
125 137
126 138
127 <!-- No docs for Polymer.PaperItemBehavior found. --> 139 <!-- No docs for Polymer.PaperItemBehavior found. -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698