mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
c51ca09e15
Instead of having a separate directory for every Sky element, we should just put them in the general framework directory. Once the framework is more complicated, we'll probably want to organize it a bit better, but for now there aren't enough files to justify having so many directories. R=esprehn@chromium.org Review URL: https://codereview.chromium.org/874303003
74 lines
1.7 KiB
Plaintext
74 lines
1.7 KiB
Plaintext
<!--
|
|
// 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" as="SkyButton" />
|
|
|
|
<sky-element
|
|
name="sky-checkbox"
|
|
attributes="checked:boolean"
|
|
on-click="handleClick">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
-webkit-user-select: none;
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
#container {
|
|
border: solid 2px;
|
|
border-color: rgba(90, 90, 90, 0.25);
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
#container.highlight {
|
|
border-radius: 10px;
|
|
background-color: orange;
|
|
border-color: orange;
|
|
}
|
|
#check {
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
#check.checked {
|
|
transform: translate(2px, -15px) rotate(45deg);
|
|
width: 10px;
|
|
height: 20px;
|
|
border-style: solid;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right-width: 2px;
|
|
border-bottom-width: 2px;
|
|
border-color: #0f9d58;
|
|
}
|
|
</style>
|
|
<div id="container" class="{{ containerStyle }}">
|
|
<div id="check" class="{{ checkStyle }}" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyButton {
|
|
created() {
|
|
super.created();
|
|
|
|
this.containerStyle = '';
|
|
this.checkStyle = '';
|
|
}
|
|
checkedChanged(oldValue, newValue) {
|
|
this.checkStyle = newValue ? 'checked' : '';
|
|
}
|
|
highlightChanged(oldValue, newValue) {
|
|
this.containerStyle = newValue ? 'highlight' : '';
|
|
}
|
|
handleClick() {
|
|
this.checked = !this.checked;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|