| <!-- |
| The common.js file must be included before this file. |
| |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <menu-item-sk> |
| |
| To use this file import it: |
| |
| <link href="/res/common/imp/menu-item-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <menu-item-sk icon="myicon" url="https://www.google.com" label="Google!"></menu-item-sk> |
| |
| Attributes: |
| icon - The icon to use for the menu item. |
| |
| label - The text to display. |
| |
| url - URL linked to by the menu item. |
| |
| Events: |
| None |
| |
| Methods: |
| None |
| --> |
| <link rel="import" href="/res/imp/bower_components/polymer/polymer.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-icon/iron-icon.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html"> |
| <dom-module id="menu-item-sk"> |
| <style> |
| a.item { |
| color: #000000; |
| text-decoration: none; |
| @apply(--menu-item-sk); |
| } |
| a.item:hover { |
| text-decoration: underline; |
| } |
| iron-icon { |
| color: var(--menu-item-sk-icon-color, #000000); |
| margin-right: 10px; |
| } |
| span { |
| white-space: nowrap; |
| } |
| </style> |
| <template> |
| <a href$="{{url}}" class="item"> |
| <paper-item> |
| <iron-icon icon="{{icon}}"></iron-icon> |
| <span>{{label}}</span> |
| </paper-item> |
| </a> |
| </template> |
| <script> |
| (function() { |
| Polymer({ |
| is: "menu-item-sk", |
| |
| properties: { |
| icon: { |
| type: String, |
| value: "", |
| }, |
| label: { |
| type: String, |
| value: "", |
| }, |
| url: { |
| type: String, |
| value: "", |
| }, |
| }, |
| }); |
| }()); |
| </script> |
| </dom-module> |