Index: sky/framework/sky-checkbox/sky-checkbox.sky |
diff --git a/sky/framework/sky-checkbox/sky-checkbox.sky b/sky/framework/sky-checkbox/sky-checkbox.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5e28211bfcba9c1e60f78e5f625899460e401b1e |
--- /dev/null |
+++ b/sky/framework/sky-checkbox/sky-checkbox.sky |
@@ -0,0 +1,49 @@ |
+<!-- |
+// Copyright 2014 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+--> |
+<import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" /> |
+ |
+<sky-element name="sky-checkbox"> |
+<template> |
+ <style> |
+ :host { |
+ display: inline-flex; |
+ justify-content: center; |
+ align-items: center; |
+ -webkit-user-select: none; |
+ width: 20px; |
+ height: 20px; |
+ border-radius: 4px; |
+ border: 1px solid blue; |
+ margin: 5px; |
+ } |
+ :host([highlight=true]) { |
+ background-color: orange; |
+ } |
+ </style> |
+ <template if="{{ checked }}"> |
+ <check>✓</check> |
+ </template> |
+</template> |
+<script> |
+module.exports = class extends SkyButton { |
+ created() { |
+ super.created(); |
+ this.setChecked(this.getAttribute('checked') == 'true'); |
+ |
+ this.addEventListener("mouseup", function() { |
+ 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
|
+ }); |
+ } |
+ toggleChecked() { |
+ this.setChecked(!this.checked); |
+ } |
+ setChecked(checked) { |
+ this.checked = checked; |
+ this.setAttribute('checked', checked); |
+ } |
+}.register(); |
+</script> |
+</sky-checkbox> |
Elliot Glaysher
2014/12/18 20:13:43
Does this need to be </sky-element>? All the other
|