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

Side by Side Diff: third_party/polymer/v0_8/components/paper-item/paper-item.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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://polym er.github.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/CO NTRIBUTORS.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/P ATENTS.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="../paper-styles/paper-styles.html"> 13 <link rel="import" href="../paper-styles/paper-styles.html">
13 14
14 <!-- 15 <!--
15 `paper-item` is a non-interactive list item. 16 `<paper-item>` is a non-interactive list item. By default, it is a horizontal fl exbox.
16 17
18 <paper-item>Item</paper-item>
19
20 Use this element with `<paper-item-body>` to make Material Design styled two-lin e 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 mor e 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
17 @element paper-item 53 @element paper-item
54 @demo demo/index.html
18 --> 55 -->
19 56
20 <dom-module id="paper-item"> 57 <dom-module id="paper-item">
21 58
22 <link rel="import" type="css" href="paper-item-shared.css"> 59 <link rel="import" type="css" href="paper-item-shared.css">
23 60
24 <style> 61 <style>
25 62
26 :host { 63 :host {
27 mixin(--layout-horizontal); 64 @apply(--layout-horizontal);
28 mixin(--layout-center); 65 @apply(--layout-center);
29 mixin(--paper-font-subhead); 66 @apply(--paper-font-subhead);
30 67
31 mixin(--paper-item); 68 @apply(--paper-item);
32 } 69 }
33 70
34 </style> 71 </style>
35 72
36 <template> 73 <template>
37 <content></content> 74 <content></content>
38 </template> 75 </template>
39 76
40 </dom-module> 77 </dom-module>
41 78
42 <script> 79 <script>
43 80
44 (function() { 81 (function() {
45 82
46 Polymer({ 83 Polymer({
47 84
48 is: 'paper-item', 85 is: 'paper-item',
49 86
50 enableCustomStyleProperties: true,
51
52 hostAttributes: { 87 hostAttributes: {
53 role: 'listitem' 88 role: 'listitem'
54 } 89 }
55 90
56 }); 91 });
57 92
58 })(); 93 })();
59 94
60 </script> 95 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698