OLD | NEW |
---|---|
(Empty) | |
1 <!-- | |
2 // Copyright 2014 The Chromium Authors. All rights reserved. | |
3 // Use of this source code is governed by a BSD-style license that can be | |
4 // found in the LICENSE file. | |
5 --> | |
6 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" /> | |
7 | |
8 <sky-element name="sky-checkbox"> | |
9 <template> | |
10 <style> | |
11 :host { | |
12 display: inline-flex; | |
13 justify-content: center; | |
14 align-items: center; | |
15 -webkit-user-select: none; | |
16 width: 20px; | |
17 height: 20px; | |
18 border-radius: 4px; | |
19 border: 1px solid blue; | |
20 margin: 5px; | |
21 } | |
22 :host([highlight=true]) { | |
23 background-color: orange; | |
24 } | |
25 </style> | |
26 <template if="{{ checked }}"> | |
27 <check>✓</check> | |
28 </template> | |
29 </template> | |
30 <script> | |
31 module.exports = class extends SkyButton { | |
32 created() { | |
33 super.created(); | |
34 this.setChecked(this.getAttribute('checked') == 'true'); | |
35 | |
36 this.addEventListener("mouseup", function() { | |
37 this.toggleChecked(); | |
abarth-chromium
2014/12/18 01:23:35
This this work? I wouldn't expect |this| to be pr
esprehn
2014/12/18 01:24:42
In an event listener |this| is the element. It's n
| |
38 }); | |
39 } | |
40 toggleChecked() { | |
41 this.setChecked(!this.checked); | |
42 } | |
43 setChecked(checked) { | |
44 this.checked = checked; | |
45 this.setAttribute('checked', checked); | |
46 } | |
47 }.register(); | |
48 </script> | |
49 </sky-checkbox> | |
Elliot Glaysher
2014/12/18 20:13:43
Does this need to be </sky-element>? All the other
| |
OLD | NEW |