OLD | NEW |
1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. | 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. |
2 Use of this source code is governed by a BSD-style license that can be | 2 Use of this source code is governed by a BSD-style license that can be |
3 found in the LICENSE file. --> | 3 found in the LICENSE file. --> |
4 | 4 |
5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> |
7 <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-button/paper-butt
on.html"> |
8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm
l"> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm
l"> |
9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
10 | 10 |
11 <iron-iconset-svg name="oobe-buttons" size="24"> | 11 <iron-iconset-svg name="oobe-buttons" size="24"> |
12 <svg> | 12 <svg> |
13 <defs> | 13 <defs> |
14 <g id="arrow-back"> | 14 <g id="arrow-back"> |
15 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> | 15 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> |
16 </path> | 16 </path> |
17 </g> | 17 </g> |
18 </defs> | 18 </defs> |
19 </svg> | 19 </svg> |
20 </iron-iconset-svg> | 20 </iron-iconset-svg> |
21 | 21 |
22 <!-- | 22 <!-- |
23 Material design square button for text-labelled buttons. | 23 Material design square button for text-labelled buttons. |
24 By default, text is blue, background is white. | 24 By default, text is blue, background is white. |
25 |inverse| makes text white on a blue background. | 25 |inverse| makes text white on a blue background. |
26 Note, that content must have separate DOM node (i.e. a separate div). | 26 Note, that content must have separate DOM node (i.e. a separate div). |
27 | 27 |
28 Example: | 28 Example: |
29 <oobe-icon-button inverse> | 29 <oobe-icon-button inverse> |
30 <div i18n-content="oobeOKButtonText"></div> | 30 <div>$i18n{oobeOKButtonText}</div> |
31 </oobe-icon-button> | 31 </oobe-icon-button> |
32 | 32 |
33 Attributes: | 33 Attributes: |
34 'disabled' - button is disabled when the attribute is set. | 34 'disabled' - button is disabled when the attribute is set. |
35 'inverse' - makes text white and background blue | 35 'inverse' - makes text white and background blue |
36 --> | 36 --> |
37 <dom-module id="oobe-text-button"> | 37 <dom-module id="oobe-text-button"> |
38 <link rel="stylesheet" href="oobe_text_button.css"> | 38 <link rel="stylesheet" href="oobe_text_button.css"> |
39 <template> | 39 <template> |
40 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" | 40 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
(...skipping 16 matching lines...) Expand all Loading... |
57 | 57 |
58 Attributes: | 58 Attributes: |
59 'disabled' - button is disabled when the attribute is set. | 59 'disabled' - button is disabled when the attribute is set. |
60 --> | 60 --> |
61 <dom-module id="oobe-back-button"> | 61 <dom-module id="oobe-back-button"> |
62 <link rel="stylesheet" href="oobe_back_button.css"> | 62 <link rel="stylesheet" href="oobe_back_button.css"> |
63 <template> | 63 <template> |
64 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"> | 64 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"> |
65 <div class="flex horizontal layout start center"> | 65 <div class="flex horizontal layout start center"> |
66 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon> | 66 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon> |
67 <div id="text" i18n-content="back"></div> | 67 <div id="text">$i18n{back}</div> |
68 </div> | 68 </div> |
69 </paper-button> | 69 </paper-button> |
70 </template> | 70 </template> |
71 </dom-module> | 71 </dom-module> |
72 | 72 |
73 <!-- | 73 <!-- |
74 Material design button that shows an icon and displays text. | 74 Material design button that shows an icon and displays text. |
75 | 75 |
76 Example: | 76 Example: |
77 <oobe-welcome-secondary-button icon="close"> | 77 <oobe-welcome-secondary-button icon="close"> |
78 <div i18n-content="oobeCloseButtonText"></div> | 78 <div>i18n version of oobeCloseButtonText</div> |
79 </oobe-welcome-secondary-button> | 79 </oobe-welcome-secondary-button> |
80 | 80 |
81 Attributes: | 81 Attributes: |
82 'icon' - a name of icon from material design set to show on button. | 82 'icon' - a name of icon from material design set to show on button. |
83 'aria-label' - accessibility label. | 83 'aria-label' - accessibility label. |
84 --> | 84 --> |
85 <dom-module id="oobe-welcome-secondary-button"> | 85 <dom-module id="oobe-welcome-secondary-button"> |
86 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> | 86 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> |
87 <template> | 87 <template> |
88 <paper-button id="button" aria-label="[[ariaLabel]]"> | 88 <paper-button id="button" aria-label="[[ariaLabel]]"> |
89 <div id="container" class="flex layout vertical center self-stretch"> | 89 <div id="container" class="flex layout vertical center self-stretch"> |
90 <div id="subcontainer" | 90 <div id="subcontainer" |
91 class="flex layout horizontal center self-stretch"> | 91 class="flex layout horizontal center self-stretch"> |
92 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> | 92 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> |
93 <content></content> | 93 <content></content> |
94 </div> | 94 </div> |
95 </div> | 95 </div> |
96 </paper-button> | 96 </paper-button> |
97 </template> | 97 </template> |
98 </dom-module> | 98 </dom-module> |
OLD | NEW |