OLD | NEW |
1 <link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html"> | 1 <!-- Copyright 2015 The Chromium Authors. All rights reserved. |
2 <link rel="import" href="chrome://resources/polymer/core-icons/core-icons.html"> | 2 Use of this source code is governed by a BSD-style license that can be |
3 <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.ht
ml"> | 3 found in the LICENSE file. --> |
4 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> | 4 |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
5 | 10 |
6 <!-- | 11 <!-- |
7 Material design buttons that mimic GAIA's buttons. | 12 Material design buttons that mimic GAIA's buttons. |
8 | 13 |
9 Example: | 14 Example: |
10 <gaia-button type="dialog"></gaia-button> | 15 <gaia-button type="dialog"></gaia-button> |
11 | 16 |
12 Attributes: | 17 Attributes: |
13 'type' - there are three kinds of button: regular blue button (none type | 18 'type' - there are three kinds of button: regular blue button (none type |
14 provided), dialog button (type="dialog") and a button that looks | 19 provided), dialog button (type="dialog") and a button that looks |
15 more like a link (type="link"). | 20 more like a link (type="link"). |
16 'disabled' - button is disabled when the attribute is set. | 21 'disabled' - button is disabled when the attribute is set. |
17 --> | 22 --> |
18 <polymer-element name="gaia-button" extends="paper-button" | 23 <dom-module id="gaia-button"> |
19 attributes="type" on-keydown="{{onKeyDown}}" on-focus="{{onFocus}}" | 24 <link rel="stylesheet" href="gaia_button.css"> |
20 on-blur="{{onBlur}}" tabindex="0"> | 25 |
21 <template> | 26 <template> |
22 <link rel="stylesheet" href="gaia_button.css"> | 27 <div on-click="onClick_" on-tap="onClick_"> |
23 <shadow></shadow> | 28 <paper-button id="button" disabled="[[disabled]]" |
| 29 on-focused-changed="focusedChanged_"> |
| 30 <content></content> |
| 31 </paper-button> |
| 32 </div> |
24 </template> | 33 </template> |
25 </polymer-element> | 34 </dom-module> |
26 | 35 |
27 <!-- | 36 <!-- |
28 Decorator for a <button>. When applied to a <button>, the button looks like | 37 Material desing icon button with a special styling. |
29 an icon from a material-design icons set. Icon's name should be specified in | |
30 'icon' attribute. | |
31 | 38 |
32 Example: | 39 Example: |
33 <button is="gaia-icon-button" icon="close"></button> | 40 <gaia-icon-button icon="close"></gaia-icon> |
| 41 |
| 42 Attributes: |
| 43 'icon' - a name of icon from material design set to show on button. |
| 44 'disabled' - button is disabled when the attribute is set. |
| 45 'aria-label' - accessibility label. |
34 --> | 46 --> |
35 <polymer-element name="gaia-icon-button" extends="button" attributes="icon" | 47 <dom-module id="gaia-icon-button"> |
36 on-mousedown="{{onMouseDown}}"> | 48 <link rel="stylesheet" href="gaia_icon_button.css"> |
| 49 |
37 <template> | 50 <template> |
38 <link rel="stylesheet" href="gaia_icon_button.css"> | 51 <div on-click="onClick_" on-tap="onClick_"> |
39 <core-icon icon="{{icon}}" fit></core-icon> | 52 <paper-icon-button id="iconButton" icon="[[icon]]" disabled="[[disabled]]" |
| 53 aria-label="[[ariaLabel]]"> |
| 54 </paper-icon-button> |
| 55 </div> |
40 </template> | 56 </template> |
41 </polymer-element> | 57 </dom-module> |
| 58 |
OLD | NEW |