| 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 |