Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(355)

Side by Side Diff: polymer_1.2.3/bower_components/paper-item/paper-item.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
13 <link rel="import" href="../paper-styles/paper-styles.html"> 13 <link rel="import" href="paper-item-behavior.html">
14 <link rel="import" href="paper-item-shared-styles.html">
14 15
15 <!-- 16 <!--
16 `<paper-item>` is a non-interactive list item. By default, it is a horizontal fl exbox. 17 Material design: [Lists](https://www.google.com/design/spec/components/lists.htm l)
18
19 `<paper-item>` is an interactive list item. By default, it is a horizontal flexb ox.
17 20
18 <paper-item>Item</paper-item> 21 <paper-item>Item</paper-item>
19 22
20 Use this element with `<paper-item-body>` to make Material Design styled two-lin e and three-line 23 Use this element with `<paper-item-body>` to make Material Design styled two-lin e and three-line
21 items. 24 items.
22 25
23 <paper-item> 26 <paper-item>
24 <paper-item-body two-line> 27 <paper-item-body two-line>
25 <div>Show your status</div> 28 <div>Show your status</div>
26 <div secondary>Your status is visible to everyone</div> 29 <div secondary>Your status is visible to everyone</div>
27 </paper-item-body> 30 </paper-item-body>
28 <iron-icon icon="warning"></iron-icon> 31 <iron-icon icon="warning"></iron-icon>
29 </paper-item> 32 </paper-item>
30 33
31 ### Styling 34 ### Styling
32 35
33 The following custom properties and mixins are available for styling: 36 The following custom properties and mixins are available for styling:
34 37
35 Custom property | Description | Default 38 Custom property | Description | D efault
36 ----------------|-------------|---------- 39 ------------------------------|----------------------------------------------|-- --------
37 `--paper-item-min-height` | Minimum height of the item | `48px` 40 `--paper-item-min-height` | Minimum height of the item | ` 48px`
38 `--paper-item` | Mixin applied to the item | `{}` 41 `--paper-item` | Mixin applied to the item | ` {}`
42 `--paper-item-selected-weight`| The font weight of a selected item | ` bold`
43 `--paper-item-selected` | Mixin applied to selected paper-items | ` {}`
44 `--paper-item-disabled-color` | The color for disabled paper-items | ` --disabled-text-color`
45 `--paper-item-disabled` | Mixin applied to disabled paper-items | ` {}`
46 `--paper-item-focused` | Mixin applied to focused paper-items | ` {}`
47 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | ` {}`
39 48
40 ### Accessibility 49 ### Accessibility
41 50
42 This element has `role="listitem"` by default. Depending on usage, it may be mor e appropriate to set 51 This element has `role="listitem"` by default. Depending on usage, it may be mor e appropriate to set
43 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`. 52 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
44 53
45 <paper-item role="menuitemcheckbox"> 54 <paper-item role="menuitemcheckbox">
46 <paper-item-body> 55 <paper-item-body>
47 Show your status 56 Show your status
48 </paper-item-body> 57 </paper-item-body>
49 <paper-checkbox></paper-checkbox> 58 <paper-checkbox></paper-checkbox>
50 </paper-item> 59 </paper-item>
51 60
52 @group Paper Elements 61 @group Paper Elements
53 @element paper-item 62 @element paper-item
54 @demo demo/index.html 63 @demo demo/index.html
55 --> 64 -->
56 65
57 <dom-module id="paper-item"> 66 <dom-module id="paper-item">
67 <template>
68 <style include="paper-item-shared-styles"></style>
69 <style>
70 :host {
71 @apply(--layout-horizontal);
72 @apply(--layout-center);
73 @apply(--paper-font-subhead);
58 74
59 <link rel="import" type="css" href="paper-item-shared.css"> 75 @apply(--paper-item);
76 }
77 </style>
60 78
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> 79 <content></content>
75 </template> 80 </template>
76 81
82 <script>
83 Polymer({
84 is: 'paper-item',
85
86 behaviors: [
87 Polymer.PaperItemBehavior
88 ]
89 });
90 </script>
77 </dom-module> 91 </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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698