| OLD | NEW |
| 1 <!-- | |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 6 Code distributed by Google as part of the polymer project is also | |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 8 --> | |
| 9 | 1 |
| 10 <!-- | |
| 11 /** | |
| 12 * @group Polymer Core Elements | |
| 13 * | |
| 14 * The `core-iconset` element allows users to define their own icon sets. | |
| 15 * The `src` property specifies the url of the icon image. Multiple icons may | |
| 16 * be included in this image and they may be organized into rows. | |
| 17 * The `icons` property is a space separated list of names corresponding to the | |
| 18 * icons. The names must be ordered as the icons are ordered in the icon image. | |
| 19 * Icons are expected to be square and are the size specified by the `iconSize` | |
| 20 * property. The `width` property corresponds to the width of the icon image | |
| 21 * and must be specified if icons are arranged into multiple rows in the image. | |
| 22 * | |
| 23 * All `core-iconset` elements are available for use by other `core-iconset` | |
| 24 * elements via a database keyed by id. Typically, an element author that wants | |
| 25 * to support a set of custom icons uses a `core-iconset` to retrieve | |
| 26 * and use another, user-defined iconset. | |
| 27 * | |
| 28 * Example: | |
| 29 * | |
| 30 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24" | |
| 31 * icons="location place starta stopb bus car train walk"> | |
| 32 * </core-iconset> | |
| 33 * | |
| 34 * This will automatically register the icon set "my-icons" to the iconset | |
| 35 * database. To use these icons from within another element, make a | |
| 36 * `core-iconset` element and call the `byId` method to retrieve a | |
| 37 * given iconset. To apply a particular icon to an element, use the | |
| 38 * `applyIcon` method. For example: | |
| 39 * | |
| 40 * iconset.applyIcon(iconNode, 'car'); | |
| 41 * | |
| 42 * Themed icon sets are also supported. The `core-iconset` can contain child | |
| 43 * `property` elements that specify a theme with an offsetX and offsetY of the | |
| 44 * theme within the icon resource. For example. | |
| 45 * | |
| 46 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24" | |
| 47 * icons="location place starta stopb bus car train walk"> | |
| 48 * <property theme="special" offsetX="256" offsetY="24"></property> | |
| 49 * </core-iconset> | |
| 50 * | |
| 51 * Then a themed icon can be applied like this: | |
| 52 * | |
| 53 * iconset.applyIcon(iconNode, 'car', 'special'); | |
| 54 * | |
| 55 * @element core-iconset | |
| 56 * @extends core-meta | |
| 57 * @homepage github.io | |
| 58 */ | |
| 59 --> | |
| 60 | |
| 61 <link rel="import" href="../core-meta/core-meta.html"> | |
| 62 | |
| 63 <polymer-element name="core-iconset" extends="core-meta" attributes="src width i
cons iconSize"> | |
| 64 | |
| 65 <script> | |
| 66 | 2 |
| 67 Polymer('core-iconset', { | 3 Polymer('core-iconset', { |
| 68 | 4 |
| 69 /** | 5 /** |
| 70 * The URL of the iconset image. | 6 * The URL of the iconset image. |
| 71 * | 7 * |
| 72 * @attribute src | 8 * @attribute src |
| 73 * @type string | 9 * @type string |
| 74 * @default '' | 10 * @default '' |
| 75 */ | 11 */ |
| (...skipping 153 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 229 this.width * scale + 'px'; | 165 this.width * scale + 'px'; |
| 230 if (icon.parentNode !== element) { | 166 if (icon.parentNode !== element) { |
| 231 element.appendChild(icon); | 167 element.appendChild(icon); |
| 232 } | 168 } |
| 233 return icon; | 169 return icon; |
| 234 } | 170 } |
| 235 } | 171 } |
| 236 | 172 |
| 237 }); | 173 }); |
| 238 | 174 |
| 239 </script> | 175 |
| 240 | |
| 241 </polymer-element> | |
| OLD | NEW |