OLD | NEW |
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 [](https://travis-ci.org/PolymerElements/paper-item) | 15 [](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 ##<paper-item> | 20 ##<paper-item> |
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 ##<paper-icon-item> | 74 ##<paper-icon-item> |
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 ##<paper-item-body> | 110 ##<paper-item-body> |
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. --> |
OLD | NEW |