third_party/polymer/v1_0/components/paper-item/paper-item-body.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="../paper-styles/paper-styles.html">
  13
  14 <!--
  15 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
  16 three- line items. It is a flex item that is a vertical flexbox.
  17
  18     <paper-item>
  19       <paper-item-body two-line>
  20         <div>Show your status</div>
  21         <div secondary>Your status is visible to everyone</div>
  22       </paper-item-body>
  23     </paper-item>
  24
  25 The child elements with the `secondary` attribute is given secondary text styling.
  26
  27 ### Styling
  28
  29 The following custom properties and mixins are available for styling:
  30
  31 Custom property | Description | Default
  32 ----------------|-------------|----------
  33 `--paper-item-body-two-line-min-height`   | Minimum height of a two-line item          | `72px`
  34 `--paper-item-body-three-line-min-height` | Minimum height of a three-line item        | `88px`
  35 `--paper-item-body-secondary-color`       | Foreground color for the `secondary` area  | `--secondary-text-color`
  36 `--paper-item-body-secondary`             | Mixin applied to the `secondary` area      | `{}`
  37
  38 -->
  39
  40 <dom-module id="paper-item-body">
  41
  42   <style>
  43
  44     :host {
  45       overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
  46       @apply(--layout-vertical);
  47       @apply(--layout-center-justified);
  48       @apply(--layout-flex);
  49     }
  50
  51     :host([two-line]) {
  52       min-height: var(--paper-item-body-two-line-min-height, 72px);
  53     }
  54
  55     :host([three-line]) {
  56       min-height: var(--paper-item-body-three-line-min-height, 88px);
  57     }
  58
  59     :host > ::content > * {
  60       white-space: nowrap;
  61       overflow: hidden;
  62       text-overflow: ellipsis;
  63     }
  64
  65     :host > ::content [secondary] {
  66       color: var(--paper-item-body-secondary-color, --secondary-text-color);
  67       @apply(--paper-font-body1);
  68
  69       @apply(--paper-item-body-secondary);
  70     }
  71
  72
  73   </style>
  74
  75   <template>
  76     <content></content>
  77   </template>
  78
  79 </dom-module>
  80
  81 <script>
  82
  83 (function() {
  84
  85   Polymer({
  86
  87     is: 'paper-item-body'
  88
  89   });
  90
  91 })();
  92
  93 </script>