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

Side by Side Diff: third_party/polymer/v0_8/components/paper-item/paper-icon-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="../paper-styles/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
13 13
14 <!-- 14 <!--
15 `paper-icon-item` is a list item with a fixed-width icon area. 15 `<paper-icon-item>` is a convenience element to make an item with icon. It is a non interactive list
16 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
17 varying widths, but you want the item bodies to line up. Use this like a `<paper -item>`. The child
18 node with the attribute `item-icon` is placed in the icon area.
16 19
17 @element paper-icon-item 20 <paper-icon-item>
21 <iron-icon icon="favorite" item-icon></iron-icon>
22 Favorite
23 </paper-icon-item>
24 <paper-icon-item>
25 <div class="avatar" item-icon></div>
26 Avatar
27 </paper-icon-item>
28
29 ### Styling
30
31 The following custom properties and mixins are available for styling:
32
33 Custom property | Description | Default
34 ----------------|-------------|----------
35 `--paper-item-icon-width` | Width of the icon area | `56px`
36 `--paper-icon-item` | Mixin applied to the item | `{}`
37
18 --> 38 -->
19 39
20 <dom-module id="paper-icon-item"> 40 <dom-module id="paper-icon-item">
21 41
22 <link rel="import" type="css" href="paper-item-shared.css"> 42 <link rel="import" type="css" href="paper-item-shared.css">
23 43
24 <style> 44 <style>
25 45
26 :host { 46 :host {
27 mixin(--layout-horizontal); 47 @apply(--layout-horizontal);
28 mixin(--layout-center); 48 @apply(--layout-center);
29 mixin(--paper-font-subhead); 49 @apply(--paper-font-subhead);
30 50
31 mixin(--paper-item); 51 @apply(--paper-item);
32 mixin(--paper-icon-item); 52 @apply(--paper-icon-item);
53 }
54
55 .content-icon {
56 width: var(--paper-item-icon-width, 56px);
33 } 57 }
34 58
35 </style> 59 </style>
36 60
37 <template> 61 <template>
38 <div id="contentIcon" class="content-icon layout horizontal center"> 62 <div id="contentIcon" class="content-icon layout horizontal center">
39 <content select="[item-icon]"></content> 63 <content select="[item-icon]"></content>
40 </div> 64 </div>
41 <content></content> 65 <content></content>
42 </template> 66 </template>
43 67
44 </dom-module> 68 </dom-module>
45 69
46 <script> 70 <script>
47 71
48 (function() { 72 (function() {
49 73
50 Polymer({ 74 Polymer({
51 75
52 is: 'paper-icon-item', 76 is: 'paper-icon-item',
53 77
54 enableCustomStyleProperties: true,
55
56 hostAttributes: { 78 hostAttributes: {
57 'role': 'listitem' 79 'role': 'listitem'
58 },
59
60 properties: {
61
62 /**
63 * The width of the icon area.
64 *
65 * @attribute iconWidth
66 * @type String
67 * @default '56px'
68 */
69 iconWidth: {
70 type: String,
71 value: '56px'
72 }
73
74 },
75
76 ready: function() {
77 this.$.contentIcon.style.width = this.iconWidth;
78 } 80 }
79 81
80 }); 82 });
81 83
82 })(); 84 })();
83 85
84 </script> 86 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698