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

Side by Side Diff: polymer_1.2.3/bower_components/iron-icon/iron-icon.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
(...skipping 14 matching lines...) Expand all
25 <iron-icon class="big" src="big_star.png"></iron-icon> 25 <iron-icon class="big" src="big_star.png"></iron-icon>
26 26
27 <style is="custom-style"> 27 <style is="custom-style">
28 .big { 28 .big {
29 --iron-icon-height: 32px; 29 --iron-icon-height: 32px;
30 --iron-icon-width: 32px; 30 --iron-icon-width: 32px;
31 } 31 }
32 </style> 32 </style>
33 33
34 The iron elements include several sets of icons. 34 The iron elements include several sets of icons.
35 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon: 35 To use the default set of icons, import `iron-icons.html` and use the `icon` att ribute to specify an icon:
36 36
37 &lt;!-- import default iconset and iron-icon --&gt;
38 <link rel="import" href="/components/iron-icons/iron-icons.html"> 37 <link rel="import" href="/components/iron-icons/iron-icons.html">
39 38
40 <iron-icon icon="menu"></iron-icon> 39 <iron-icon icon="menu"></iron-icon>
41 40
42 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and 41 To use a different built-in set of icons, import the specific `iron-icons/<icons et>-icons.html`, and
43 specify the icon as `<iconset>:<icon>`. For example: 42 specify the icon as `<iconset>:<icon>`. For example, to use a communication icon , you would
43 use:
44 44
45 &lt;!-- import communication iconset and iron-icon --&gt;
46 <link rel="import" href="/components/iron-icons/communication-icons.html"> 45 <link rel="import" href="/components/iron-icons/communication-icons.html">
47 46
48 <iron-icon icon="communication:email"></iron-icon> 47 <iron-icon icon="communication:email"></iron-icon>
49 48
50 You can also create custom icon sets of bitmap or SVG icons. 49 You can also create custom icon sets of bitmap or SVG icons.
51 50
52 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `: 51 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:
53 52
54 <iron-icon icon="fruit:cherry"></iron-icon> 53 <iron-icon icon="fruit:cherry"></iron-icon>
55 54
56 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about 55 See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for mo re information about
57 how to create a custom iconset. 56 how to create a custom iconset.
58 57
59 See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=d emo:demo/index.html) for the default set of icons. 58 See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available
59 in the various iconsets.
60 60
61 61
62 ### Styling 62 ### Styling
63 63
64 The following custom properties are available for styling: 64 The following custom properties are available for styling:
65 65
66 Custom property | Description | Default 66 Custom property | Description | Default
67 ----------------|-------------|---------- 67 ----------------|-------------|----------
68 `--iron-icon-width` | Width of the icon | `24px` 68 `--iron-icon-width` | Width of the icon | `24px`
69 `--iron-icon-height` | Height of the icon | `24px` 69 `--iron-icon-height` | Height of the icon | `24px`
70 `--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor`
71 `--iron-icon-stroke-color` | Stroke color of the svg icon | none
70 72
71 @group Iron Elements 73 @group Iron Elements
72 @element iron-icon 74 @element iron-icon
73 @demo demo/index.html 75 @demo demo/index.html
74 @hero hero.svg 76 @hero hero.svg
75 @homepage polymer.github.io 77 @homepage polymer.github.io
76 --> 78 -->
77 79
78 <dom-module id="iron-icon"> 80 <dom-module id="iron-icon">
79 81
80 <style> 82 <style>
81 :host { 83 :host {
82 @apply(--layout-inline); 84 @apply(--layout-inline);
83 @apply(--layout-center-center); 85 @apply(--layout-center-center);
84 position: relative; 86 position: relative;
85 87
86 vertical-align: middle; 88 vertical-align: middle;
87 89
88 fill: currentcolor; 90 fill: var(--iron-icon-fill-color, currentcolor);
91 stroke: var(--iron-icon-stroke-color, none);
89 92
90 width: var(--iron-icon-width, 24px); 93 width: var(--iron-icon-width, 24px);
91 height: var(--iron-icon-height, 24px); 94 height: var(--iron-icon-height, 24px);
92 } 95 }
93 </style> 96 </style>
94 97
95 <template> 98 <template>
96 <iron-meta id="meta" type="iconset"></iron-meta>
97 </template> 99 </template>
98 100
99 <script> 101 <script>
100 102
101 Polymer({ 103 Polymer({
102 104
103 is: 'iron-icon', 105 is: 'iron-icon',
104 106
105 properties: { 107 properties: {
106 108
(...skipping 16 matching lines...) Expand all
123 }, 125 },
124 126
125 /** 127 /**
126 * If using iron-icon without an iconset, you can set the src to be 128 * If using iron-icon without an iconset, you can set the src to be
127 * the URL of an individual icon image file. Note that this will take 129 * the URL of an individual icon image file. Note that this will take
128 * precedence over a given icon attribute. 130 * precedence over a given icon attribute.
129 */ 131 */
130 src: { 132 src: {
131 type: String, 133 type: String,
132 observer: '_srcChanged' 134 observer: '_srcChanged'
135 },
136
137 /**
138 * @type {!Polymer.IronMeta}
139 */
140 _meta: {
141 value: Polymer.Base.create('iron-meta', {type: 'iconset'})
133 } 142 }
143
134 }, 144 },
135 145
136 _DEFAULT_ICONSET: 'icons', 146 _DEFAULT_ICONSET: 'icons',
137 147
138 _iconChanged: function(icon) { 148 _iconChanged: function(icon) {
139 var parts = (icon || '').split(':'); 149 var parts = (icon || '').split(':');
140 this._iconName = parts.pop(); 150 this._iconName = parts.pop();
141 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; 151 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
142 this._updateIcon(); 152 this._updateIcon();
143 }, 153 },
144 154
145 _srcChanged: function(src) { 155 _srcChanged: function(src) {
146 this._updateIcon(); 156 this._updateIcon();
147 }, 157 },
148 158
149 _usesIconset: function() { 159 _usesIconset: function() {
150 return this.icon || !this.src; 160 return this.icon || !this.src;
151 }, 161 },
152 162
163 /** @suppress {visibility} */
153 _updateIcon: function() { 164 _updateIcon: function() {
154 if (this._usesIconset()) { 165 if (this._usesIconset()) {
155 if (this._iconsetName) { 166 if (this._iconsetName) {
156 this._iconset = this.$.meta.byKey(this._iconsetName); 167 this._iconset = /** @type {?Polymer.Iconset} */ (
168 this._meta.byKey(this._iconsetName));
157 if (this._iconset) { 169 if (this._iconset) {
158 this._iconset.applyIcon(this, this._iconName, this.theme); 170 this._iconset.applyIcon(this, this._iconName, this.theme);
171 this.unlisten(window, 'iron-iconset-added', '_updateIcon');
159 } else { 172 } else {
160 this._warn(this._logf('_updateIcon', 'could not find iconset `' 173 this.listen(window, 'iron-iconset-added', '_updateIcon');
161 + this._iconsetName + '`, did you import the iconset?'));
162 } 174 }
163 } 175 }
164 } else { 176 } else {
165 if (!this._img) { 177 if (!this._img) {
166 this._img = document.createElement('img'); 178 this._img = document.createElement('img');
167 this._img.style.width = '100%'; 179 this._img.style.width = '100%';
168 this._img.style.height = '100%'; 180 this._img.style.height = '100%';
181 this._img.draggable = false;
169 } 182 }
170 this._img.src = this.src; 183 this._img.src = this.src;
171 Polymer.dom(this.root).appendChild(this._img); 184 Polymer.dom(this.root).appendChild(this._img);
172 } 185 }
173 } 186 }
174 187
175 }); 188 });
176 189
177 </script> 190 </script>
178 191
179 </dom-module> 192 </dom-module>
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/iron-icon/index.html ('k') | polymer_1.2.3/bower_components/iron-icon/test/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698