<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-behaviors/iron-control-state.html"> <link rel="import" href="../iron-behaviors/iron-button-state.html"> <link rel="import" href="../paper-styles/paper-styles.html"> <link rel="import" href="paper-item-shared-styles.html"> <!-- `<paper-item>` is a non-interactive list item. By default, it is a horizontal flexbox. <paper-item>Item</paper-item> Use this element with `<paper-item-body>` to make Material Design styled two-line and three-line items. <paper-item> <paper-item-body two-line> <div>Show your status</div> <div secondary>Your status is visible to everyone</div> </paper-item-body> <iron-icon icon="warning"></iron-icon> </paper-item> ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-item-min-height` | Minimum height of the item | `48px` `--paper-item` | Mixin applied to the item | `{}` ### Accessibility This element has `role="listitem"` by default. Depending on usage, it may be more appropriate to set `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`. <paper-item role="menuitemcheckbox"> <paper-item-body> Show your status </paper-item-body> <paper-checkbox></paper-checkbox> </paper-item> @group Paper Elements @element paper-item @demo demo/index.html --> <dom-module id="paper-item"> <template> <style include="paper-item-shared-styles"></style> <style> :host { @apply(--layout-horizontal); @apply(--layout-center); @apply(--paper-font-subhead); @apply(--paper-item); } </style> <content></content> </template> <script> Polymer({ is: 'paper-item', hostAttributes: { role: 'listitem', tabindex: '0' }, behaviors: [ Polymer.IronControlState, Polymer.IronButtonState ] }); </script> </dom-module>