| OLD | NEW |
| (Empty) | |
| 1 |
| 2 <!--- |
| 3 |
| 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 |
| 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 [](https://travis-ci.org/PolymerElements/paper-item) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-item)_ |
| 15 |
| 16 |
| 17 ##<paper-item> |
| 18 |
| 19 |
| 20 Material design: [Lists](https://www.google.com/design/spec/components/lists.htm
l) |
| 21 |
| 22 `<paper-item>` is an interactive list item. By default, it is a horizontal flexb
ox. |
| 23 |
| 24 <paper-item>Item</paper-item> |
| 25 |
| 26 Use this element with `<paper-item-body>` to make Material Design styled two-lin
e and three-line |
| 27 items. |
| 28 |
| 29 <paper-item> |
| 30 <paper-item-body two-line> |
| 31 <div>Show your status</div> |
| 32 <div secondary>Your status is visible to everyone</div> |
| 33 </paper-item-body> |
| 34 <iron-icon icon="warning"></iron-icon> |
| 35 </paper-item> |
| 36 |
| 37 ### Styling |
| 38 |
| 39 The following custom properties and mixins are available for styling: |
| 40 |
| 41 Custom property | Description | D
efault |
| 42 ------------------------------|----------------------------------------------|--
-------- |
| 43 `--paper-item-min-height` | Minimum height of the item | `
48px` |
| 44 `--paper-item` | Mixin applied to the item | `
{}` |
| 45 `--paper-item-selected-weight`| The font weight of a selected item | `
bold` |
| 46 `--paper-item-selected` | Mixin applied to selected paper-items | `
{}` |
| 47 `--paper-item-disabled-color` | The color for disabled paper-items | `
--disabled-text-color` |
| 48 `--paper-item-disabled` | Mixin applied to disabled paper-items | `
{}` |
| 49 `--paper-item-focused` | Mixin applied to focused paper-items | `
{}` |
| 50 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `
{}` |
| 51 |
| 52 ### Accessibility |
| 53 |
| 54 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"`. |
| 56 |
| 57 <paper-item role="menuitemcheckbox"> |
| 58 <paper-item-body> |
| 59 Show your status |
| 60 </paper-item-body> |
| 61 <paper-checkbox></paper-checkbox> |
| 62 </paper-item> |
| 63 |
| 64 |
| 65 |
| 66 ##<paper-icon-item> |
| 67 |
| 68 |
| 69 `<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 |
| 71 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. |
| 73 |
| 74 <paper-icon-item> |
| 75 <iron-icon icon="favorite" item-icon></iron-icon> |
| 76 Favorite |
| 77 </paper-icon-item> |
| 78 <paper-icon-item> |
| 79 <div class="avatar" item-icon></div> |
| 80 Avatar |
| 81 </paper-icon-item> |
| 82 |
| 83 ### Styling |
| 84 |
| 85 The following custom properties and mixins are available for styling: |
| 86 |
| 87 Custom property | Description |
Default |
| 88 ------------------------------|------------------------------------------------|
---------- |
| 89 `--paper-item-icon-width` | Width of the icon area |
`56px` |
| 90 `--paper-icon-item` | Mixin applied to the item |
`{}` |
| 91 `--paper-item-selected-weight`| The font weight of a selected item |
`bold` |
| 92 `--paper-item-selected` | Mixin applied to selected paper-items
| `{}` |
| 93 `--paper-item-disabled-color` | The color for disabled paper-items |
`--disabled-text-color` |
| 94 `--paper-item-disabled` | Mixin applied to disabled paper-items | `
{}` |
| 95 `--paper-item-focused` | Mixin applied to focused paper-items | `
{}` |
| 96 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `
{}` |
| 97 |
| 98 |
| 99 ##<paper-item-body> |
| 100 |
| 101 |
| 102 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. |
| 104 |
| 105 <paper-item> |
| 106 <paper-item-body two-line> |
| 107 <div>Show your status</div> |
| 108 <div secondary>Your status is visible to everyone</div> |
| 109 </paper-item-body> |
| 110 </paper-item> |
| 111 |
| 112 The child elements with the `secondary` attribute is given secondary text stylin
g. |
| 113 |
| 114 ### Styling |
| 115 |
| 116 The following custom properties and mixins are available for styling: |
| 117 |
| 118 Custom property | Description | Default |
| 119 ----------------|-------------|---------- |
| 120 `--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` |
| 122 `--paper-item-body-secondary-color` | Foreground color for the `secondary`
area | `--secondary-text-color` |
| 123 `--paper-item-body-secondary` | Mixin applied to the `secondary` are
a | `{}` |
| 124 |
| 125 |
| 126 |
| 127 <!-- No docs for Polymer.PaperItemBehavior found. --> |
| OLD | NEW |