• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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/default-theme.html">
14<link rel="import" href="../paper-styles/typography.html">
15
16<!--
17Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
18three- line items. It is a flex item that is a vertical flexbox.
19
20    <paper-item>
21      <paper-item-body two-line>
22        <div>Show your status</div>
23        <div secondary>Your status is visible to everyone</div>
24      </paper-item-body>
25    </paper-item>
26
27The child elements with the `secondary` attribute is given secondary text styling.
28
29### Styling
30
31The following custom properties and mixins are available for styling:
32
33Custom property | Description | Default
34----------------|-------------|----------
35`--paper-item-body-two-line-min-height`   | Minimum height of a two-line item          | `72px`
36`--paper-item-body-three-line-min-height` | Minimum height of a three-line item        | `88px`
37`--paper-item-body-secondary-color`       | Foreground color for the `secondary` area  | `--secondary-text-color`
38`--paper-item-body-secondary`             | Mixin applied to the `secondary` area      | `{}`
39
40-->
41
42<dom-module id="paper-item-body">
43  <template>
44    <style>
45      :host {
46        overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
47        @apply(--layout-vertical);
48        @apply(--layout-center-justified);
49        @apply(--layout-flex);
50      }
51
52      :host([two-line]) {
53        min-height: var(--paper-item-body-two-line-min-height, 72px);
54      }
55
56      :host([three-line]) {
57        min-height: var(--paper-item-body-three-line-min-height, 88px);
58      }
59
60      :host > ::content > * {
61        overflow: hidden;
62        text-overflow: ellipsis;
63        white-space: nowrap;
64      }
65
66      :host > ::content [secondary] {
67        @apply(--paper-font-body1);
68
69        color: var(--paper-item-body-secondary-color, --secondary-text-color);
70
71        @apply(--paper-item-body-secondary);
72      }
73    </style>
74
75    <content></content>
76  </template>
77
78  <script>
79    Polymer({
80      is: 'paper-item-body'
81    });
82  </script>
83</dom-module>
84