third_party/polymer/v1_0/components/paper-item/paper-item.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  13 <link rel="import" href="../paper-styles/paper-styles.html">
  14
  15 <!--
  16 `<paper-item>` is a non-interactive list item. By default, it is a horizontal flexbox.
  17
  18     <paper-item>Item</paper-item>
  19
  20 Use this element with `<paper-item-body>` to make Material Design styled two-line and three-line
  21 items.
  22
  23     <paper-item>
  24       <paper-item-body two-line>
  25         <div>Show your status</div>
  26         <div secondary>Your status is visible to everyone</div>
  27       </paper-item-body>
  28       <iron-icon icon="warning"></iron-icon>
  29     </paper-item>
  30
  31 ### Styling
  32
  33 The following custom properties and mixins are available for styling:
  34
  35 Custom property | Description | Default
  36 ----------------|-------------|----------
  37 `--paper-item-min-height` | Minimum height of the item | `48px`
  38 `--paper-item`            | Mixin applied to the item  | `{}`
  39
  40 ### Accessibility
  41
  42 This element has `role="listitem"` by default. Depending on usage, it may be more appropriate to set
  43 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
  44
  45     <paper-item role="menuitemcheckbox">
  46       <paper-item-body>
  47         Show your status
  48       </paper-item-body>
  49       <paper-checkbox></paper-checkbox>
  50     </paper-item>
  51
  52 @group Paper Elements
  53 @element paper-item
  54 @demo demo/index.html
  55 -->
  56
  57 <dom-module id="paper-item">
  58
  59   <link rel="import" type="css" href="paper-item-shared.css">
  60
  61   <style>
  62
  63     :host {
  64       @apply(--layout-horizontal);
  65       @apply(--layout-center);
  66       @apply(--paper-font-subhead);
  67
  68       @apply(--paper-item);
  69     }
  70
  71   </style>
  72
  73   <template>
  74     <content></content>
  75   </template>
  76
  77 </dom-module>
  78
  79 <script>
  80
  81 (function() {
  82
  83   Polymer({
  84
  85     is: 'paper-item',
  86
  87     hostAttributes: {
  88       role: 'listitem'
  89     }
  90
  91   });
  92
  93 })();
  94
  95 </script>