Chromium Code Reviews| 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
|