Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(179)

Side by Side Diff: lib/src/paper-checkbox/paper-checkbox.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « lib/src/paper-card/paper-card.html ('k') | lib/src/paper-checkbox/test/basic.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-ripple/paper-ripple.html"> 12 <link rel="import" href="../paper-ripple/paper-ripple.html">
13 <link rel="import" href="../paper-styles/default-theme.html"> 13 <link rel="import" href="../paper-styles/default-theme.html">
14 <link rel="import" href="../paper-styles/color.html"> 14 <link rel="import" href="../paper-styles/color.html">
15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 15 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html" >
16 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-b ehavior.html"> 16
17 <!-- 17 <!--
18 Material design: [Checkbox](https://www.google.com/design/spec/components/select ion-controls.html#selection-controls-checkbox)
18 19
19 `paper-checkbox` is a button that can be either checked or unchecked. User 20 `paper-checkbox` is a button that can be either checked or unchecked. User
20 can tap the checkbox to check or uncheck it. Usually you use checkboxes 21 can tap the checkbox to check or uncheck it. Usually you use checkboxes
21 to allow user to select multiple options from a set. If you have a single 22 to allow user to select multiple options from a set. If you have a single
22 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` 23 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
23 instead. 24 instead.
24 25
25 Example: 26 Example:
26 27
27 <paper-checkbox>label</paper-checkbox> 28 <paper-checkbox>label</paper-checkbox>
28 29
29 <paper-checkbox checked> label</paper-checkbox> 30 <paper-checkbox checked> label</paper-checkbox>
30 31
31 ### Styling 32 ### Styling
32 33
33 The following custom properties and mixins are available for styling: 34 The following custom properties and mixins are available for styling:
34 35
35 Custom property | Description | Default 36 Custom property | Description | Default
36 ----------------|-------------|---------- 37 ----------------|-------------|----------
37 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent` 38 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent`
38 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` 39 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
39 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color` 40 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color`
40 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color` 41 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color`
41 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color` 42 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color`
42 `--paper-checkbox-checkmark-color` | Checkmark color | `white` 43 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
43 `--paper-checkbox-label-color` | Label color | `--primary-text-color` 44 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
45 `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
44 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500 ` 46 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500 `
45 47
46 @demo demo/index.html 48 @demo demo/index.html
47 --> 49 -->
48 50
49 <dom-module id="paper-checkbox"> 51 <dom-module id="paper-checkbox">
50 <template> 52 <template strip-whitespace>
51 <style> 53 <style>
52 :host { 54 :host {
53 display: inline-block; 55 display: inline-block;
54 white-space: nowrap; 56 white-space: nowrap;
55 } 57 }
56 58
57 :host(:focus) { 59 :host(:focus) {
58 outline: none; 60 outline: none;
59 } 61 }
60 62
61 .hidden { 63 .hidden {
62 display: none; 64 display: none;
63 } 65 }
64 66
65 #checkboxContainer { 67 #checkboxContainer {
66 display: inline-block; 68 display: inline-block;
67 position: relative; 69 position: relative;
68 width: 18px; 70 width: 18px;
69 height: 18px; 71 height: 18px;
70 cursor: pointer; 72 cursor: pointer;
71 -webkit-transform: translateZ(0); 73 -webkit-transform: translateZ(0);
72 transform: translateZ(0); 74 transform: translateZ(0);
73 vertical-align: middle; 75 vertical-align: middle;
74 background-color: var(--paper-checkbox-unchecked-background-color, trans parent); 76 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
75 } 77 }
76 78
77 :host #ink { 79 #ink {
78 position: absolute; 80 position: absolute;
79 top: -15px; 81 top: -15px;
80 left: -15px; 82 left: -15px;
81 width: 48px; 83 width: 48px;
82 height: 48px; 84 height: 48px;
83 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); 85 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
84 opacity: 0.6; 86 opacity: 0.6;
85 pointer-events: none; 87 pointer-events: none;
86 } 88 }
87 89
88 :host #ink[checked] { 90 :host-context([dir="rtl"]) #ink {
91 right: -15px;
92 left: auto;
93 }
94
95 #ink[checked] {
89 color: var(--paper-checkbox-checked-ink-color, --default-primary-color); 96 color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
90 } 97 }
91 98
92 :host #checkbox { 99 #checkbox {
93 position: relative; 100 position: relative;
94 box-sizing: border-box; 101 box-sizing: border-box;
95 height: 100%; 102 height: 100%;
96 border: solid 2px; 103 border: solid 2px;
97 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color ); 104 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color );
98 border-radius: 2px; 105 border-radius: 2px;
99 pointer-events: none; 106 pointer-events: none;
100 -webkit-transition: background-color 140ms, border-color 140ms; 107 -webkit-transition: background-color 140ms, border-color 140ms;
101 transition: background-color 140ms, border-color 140ms; 108 transition: background-color 140ms, border-color 140ms;
102 } 109 }
(...skipping 27 matching lines...) Expand all
130 height: 0px; 137 height: 0px;
131 } 138 }
132 100% { 139 100% {
133 top: -1px; 140 top: -1px;
134 left: 4px; 141 left: 4px;
135 width: 5px; 142 width: 5px;
136 height: 10px; 143 height: 10px;
137 } 144 }
138 } 145 }
139 146
140 :host #checkbox.checked { 147 #checkbox.checked {
141 background-color: var(--paper-checkbox-checked-color, --default-primary- color); 148 background-color: var(--paper-checkbox-checked-color, --default-primary- color);
142 border-color: var(--paper-checkbox-checked-color, --default-primary-colo r); 149 border-color: var(--paper-checkbox-checked-color, --default-primary-colo r);
143 } 150 }
144 151
145 :host #checkmark { 152 #checkmark {
146 -webkit-transform: rotate(45deg); 153 -webkit-transform: rotate(45deg);
147 transform: rotate(45deg); 154 transform: rotate(45deg);
148 position: absolute; 155 position: absolute;
149 top: -1px; 156 top: -1px;
150 left: 4px; 157 left: 4px;
151 width: 5px; 158 width: 5px;
152 height: 10px; 159 height: 10px;
153 border-style: solid; 160 border-style: solid;
154 border-top: none; 161 border-top: none;
155 border-left: none; 162 border-left: none;
156 border-right-width: 2px; 163 border-right-width: 2px;
157 border-bottom-width: 2px; 164 border-bottom-width: 2px;
158 border-color: var(--paper-checkbox-checkmark-color, white); 165 border-color: var(--paper-checkbox-checkmark-color, white);
159 } 166 }
160 167
161 /* label */ 168 /* label */
162 #checkboxLabel { 169 #checkboxLabel {
163 position: relative; 170 position: relative;
164 display: inline-block; 171 display: inline-block;
165 vertical-align: middle; 172 vertical-align: middle;
166 padding-left: 8px; 173 padding-left: var(--paper-checkbox-label-spacing, 8px);
167 white-space: normal; 174 white-space: normal;
168 pointer-events: none; 175 pointer-events: none;
169 color: var(--paper-checkbox-label-color, --primary-text-color); 176 color: var(--paper-checkbox-label-color, --primary-text-color);
170 } 177 }
171 178
179 :host-context([dir="rtl"]) #checkboxLabel {
180 padding-right: var(--paper-checkbox-label-spacing, 8px);
181 padding-left: 0;
182 }
183
172 #checkboxLabel[hidden] { 184 #checkboxLabel[hidden] {
173 display: none; 185 display: none;
174 } 186 }
175 187
176 /* disabled state */ 188 /* disabled state */
177 :host([disabled]) { 189 :host([disabled]) {
178 pointer-events: none; 190 pointer-events: none;
179 } 191 }
180 192
181 :host([disabled]) #checkbox { 193 :host([disabled]) #checkbox {
(...skipping 10 matching lines...) Expand all
192 opacity: 0.65; 204 opacity: 0.65;
193 } 205 }
194 206
195 /* invalid state */ 207 /* invalid state */
196 #checkbox.invalid:not(.checked) { 208 #checkbox.invalid:not(.checked) {
197 border-color: var(--paper-checkbox-error-color, --google-red-500); 209 border-color: var(--paper-checkbox-error-color, --google-red-500);
198 } 210 }
199 </style> 211 </style>
200 212
201 <div id="checkboxContainer"> 213 <div id="checkboxContainer">
202 <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></pape r-ripple>
203 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> 214 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
204 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> 215 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
205 </div> 216 </div>
206 </div> 217 </div>
207 218
208 <div id="checkboxLabel"><content></content></div> 219 <div id="checkboxLabel"><content></content></div>
209 </template> 220 </template>
210 221
211 <script> 222 <script>
212 Polymer({ 223 Polymer({
213 is: 'paper-checkbox', 224 is: 'paper-checkbox',
214 225
215 behaviors: [ 226 behaviors: [
216 Polymer.PaperInkyFocusBehavior, 227 Polymer.PaperCheckedElementBehavior
217 Polymer.IronCheckedElementBehavior
218 ], 228 ],
219 229
220 hostAttributes: { 230 hostAttributes: {
221 role: 'checkbox', 231 role: 'checkbox',
222 'aria-checked': false, 232 'aria-checked': false,
223 tabindex: 0 233 tabindex: 0
224 }, 234 },
225 235
226 properties: { 236 properties: {
227 /** 237 /**
228 * Fired when the checked state changes due to user interaction. 238 * Fired when the checked state changes due to user interaction.
229 * 239 *
230 * @event change 240 * @event change
231 */ 241 */
232 242
233 /** 243 /**
234 * Fired when the checked state changes. 244 * Fired when the checked state changes.
235 * 245 *
236 * @event iron-change 246 * @event iron-change
237 */ 247 */
238 ariaActiveAttribute: { 248 ariaActiveAttribute: {
239 type: String, 249 type: String,
240 value: 'aria-checked' 250 value: 'aria-checked'
241 } 251 }
242 }, 252 },
243 253
244 attached: function() {
245 this._isReady = true;
246
247 // Don't stomp over a user-set aria-label.
248 if (!this.getAttribute('aria-label')) {
249 this.updateAriaLabel();
250 }
251 },
252
253 /**
254 * Update the checkbox aria-label. This is a temporary workaround not
255 * being able to observe changes in <content>
256 * (see: https://github.com/Polymer/polymer/issues/1773)
257 *
258 * Call this if you manually change the contents of the checkbox
259 * and want the aria-label to match the new contents.
260 */
261 updateAriaLabel: function() {
262 this.setAttribute('aria-label', Polymer.dom(this).textContent.trim());
263 },
264
265 // button-behavior hook
266 _buttonStateChanged: function() {
267 if (this.disabled) {
268 return;
269 }
270 if (this._isReady) {
271 this.checked = this.active;
272 }
273 },
274
275 _computeCheckboxClass: function(checked, invalid) { 254 _computeCheckboxClass: function(checked, invalid) {
276 var className = ''; 255 var className = '';
277 if (checked) { 256 if (checked) {
278 className += 'checked '; 257 className += 'checked ';
279 } 258 }
280 if (invalid) { 259 if (invalid) {
281 className += 'invalid'; 260 className += 'invalid';
282 } 261 }
283 return className; 262 return className;
284 }, 263 },
285 264
286 _computeCheckmarkClass: function(checked) { 265 _computeCheckmarkClass: function(checked) {
287 return checked ? '' : 'hidden'; 266 return checked ? '' : 'hidden';
267 },
268
269 // create ripple inside the checkboxContainer
270 _createRipple: function() {
271 this._rippleContainer = this.$.checkboxContainer;
272 return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
288 } 273 }
274
289 }); 275 });
290 </script> 276 </script>
291 </dom-module> 277 </dom-module>
OLDNEW
« no previous file with comments | « lib/src/paper-card/paper-card.html ('k') | lib/src/paper-checkbox/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698