ms-practice.nextera.questarai.comms-practicenexteraquestaraicom

Example setting size to 32px x 32px: The iron elements include several sets of icons. To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon: To use a different built-in set of icons, import the specific `iron-icons/ -icons.html`, and specify the icon as ` : `. For example, to use a communication icon, you would use: You can also create custom icon sets of bitmap or SVG icons. Example of using an icon named `cherry` from a custom iconset with the ID `fruit`: See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about how to create a custom iconset. See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available in the various iconsets. To load a subset of icons from one of the default `iron-icons` sets, you can use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you to select individual icons, and creates an iconset from them that you can use directly in your elements. ### Styling The following custom properties are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--iron-icon` | Mixin applied to the icon | {} `--iron-icon-width` | Width of the icon | `24px` `--iron-icon-height` | Height of the icon | `24px` `--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor` `--iron-icon-stroke-color` | Stroke color of the svg icon | none @group Iron Elements @element iron-icon @demo demo/index.html @hero hero.svg @homepage polymer.github.io -- Note that value="foo/bar" is the metadata I've defined. I could define more attributes or use child nodes to define additional metadata. Now I can access that element (and it's metadata) from any iron-meta instance via the byKey method, e.g. meta.byKey('info'); Pure imperative form would be like: document.createElement('iron-meta').byKey('info'); Or, in a Polymer element, you can include a meta in your template: ... this.$.meta.byKey('info'); @group Iron Elements @demo demo/index.html @hero hero.svg @element iron-meta -- ` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as flexbox. This component provides two different ways to use flexbox: 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). The layout class stylesheet provides a simple set of class-based flexbox rules, that let you specify layout properties directly in markup. You must include this file in every element that needs to use them. Sample use: ``` ``` ```html horizontal layout center alignment ``` 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes) are deprecated, and should not be used. To continue using layout properties directly in markup, please switch to using the new `dom-module`-based [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). Please note that the new version does not use `/deep/`, and therefore requires you to import the `dom-modules` in every element that needs to use them. A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` ` is available. @group Iron Elements @pseudoElement iron-flex-layout @demo demo/index.html -- ... this.$.xhr.send({url: url, body: params}); -- With `auto` set to `true`, the element performs a request whenever its `url`, `params` or `body` properties are changed. Automatically generated requests will be debounced in the case that multiple attributes are changed sequentially. Note: The `params` attribute must be double quoted JSON. You can trigger a request explicitly by calling `generateRequest` on the element. @demo demo/index.html @hero hero.svg -- * * * Alternatively, you can also inline your resources inside the app itself: * * * * {{localize('hello', 'name', 'Batman')}} * * * * * @demo demo/index.html * @polymerBehavior Polymer.AppLocalizeBehavior */ Polymer.AppLocalizeBehavior = { /** * Internal singleton cache. This is the private implementation of the * behaviour; don't interact with it directly. */ __localizationCache: { requests: {}, /* One iron-request per unique resources path. */ messages: {}, /* Unique localized strings. Invalidated when the language, formats or resources change. */ ajax: null /* Global iron-ajax object used to request resource files. */ }, /** * Fired after the resources have been loaded. * * @event app-localize-resources-loaded */ /** * Fired when the resources cannot be loaded due to an error. * * @event app-localize-resources-error */ properties: { /** * The language used for translation. */ language: { type: String }, /** * The dictionary of localized messages, for each of the languages that * are going to be used. See http://formatjs.io/guides/message-syntax/ for * more information on the message syntax. * * For example, a valid dictionary would be: * this.resources = { * 'en': { 'greeting': 'Hello!' }, 'fr' : { 'greeting': 'Bonjour!' } * } */ resources: { type: Object }, /** * Optional dictionary of user defined formats, as explained here: * http://formatjs.io/guides/message-syntax/#custom-formats * * For example, a valid dictionary of formats would be: * this.formats = { * number: { USD: { style: 'currency', currency: 'USD' } } * } */ formats: { type: Object, value: function() { return {} } }, /** * If true, will use the provided key when * the translation does not exist for that key. */ useKeyIfMissing: { type: Boolean, value: false }, /** * Translates a string to the current `language`. Any parameters to the * string should be passed in order, as follows: * `localize(stringKey, param1Name, param1Value, param2Name, param2Value)` */ localize: { type: Function, computed: '__computeLocalize(language, resources, formats)' }, /** * If true, will bubble up the event to the parents */ bubbleEvent: { type: Boolean, value: false } }, loadResources: function(path) { var proto = this.constructor.prototype; // Check if localCache exist just in case. this.__checkLocalizationCache(proto); // If the global ajax object has not been initialized, initialize and cache it. var ajax = proto.__localizationCache.ajax; if (!ajax) { ajax = proto.__localizationCache.ajax = document.createElement('iron-ajax'); } var request = proto.__localizationCache.requests[path]; if (!request) { ajax.url = path; var request = ajax.generateRequest(); request.completes.then( this.__onRequestResponse.bind(this), this.__onRequestError.bind(this)); // Cache the instance so that it can be reused if the same path is loaded. proto.__localizationCache.requests[path] = request; } else { request.completes.then( this.__onRequestResponse.bind(this), this.__onRequestError.bind(this)); } }, /** * Returns a computed `localize` method, based on the current `language`. */ __computeLocalize: function(language, resources, formats) { var proto = this.constructor.prototype; // Check if localCache exist just in case. this.__checkLocalizationCache(proto); // Everytime any of the parameters change, invalidate the strings cache. proto.__localizationCache.messages = {}; return function() { var key = arguments[0]; if (!key || !resources || !language || !resources[language]) return; // Cache the key/value pairs for the same language, so that we don't // do extra work if we're just reusing strings across an application. var translatedValue = resources[language][key]; if (!translatedValue) { return this.useKeyIfMissing ? key : ''; } var messageKey = key + translatedValue; var translatedMessage = proto.__localizationCache.messages[messageKey]; if (!translatedMessage) { translatedMessage = new IntlMessageFormat...