mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
cfd21dfd13
We could do something much more sophisticated for deploy in the future. Also add #!mojo:sky_viewer to .sky file demos R=abarth@chromium.org Review URL: https://codereview.chromium.org/885653006
89 lines
2.5 KiB
Plaintext
89 lines
2.5 KiB
Plaintext
#!mojo mojo:sky_viewer
|
|
<!--
|
|
// 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.
|
|
-->
|
|
<sky>
|
|
<import src="/sky/framework/sky-box.sky"/>
|
|
<import src="/sky/framework/sky-button.sky"/>
|
|
<import src="/sky/framework/sky-checkbox.sky"/>
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
|
|
<import src="/sky/framework/sky-input.sky"/>
|
|
<import src="/sky/framework/sky-radio.sky"/>
|
|
<sky-element name="widget-root">
|
|
<template>
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
sky-checkbox {
|
|
margin: 5px;
|
|
}
|
|
.output {
|
|
margin-left: 48px;
|
|
}
|
|
</style>
|
|
|
|
<sky-box title='Text'>
|
|
<sky-input id="text" value="{{ inputValue }}" />
|
|
<div>value = {{ inputValue }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Buttons'>
|
|
<sky-button id='button' on-click='handleClick'>Button</sky-button>
|
|
<div>highlight: {{ myButton.highlight }}</div>
|
|
<div>clickCount: {{ clickCount }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Checkboxes'>
|
|
<div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
|
|
<div class="output">highlight: {{ myCheckbox.highlight }}</div>
|
|
<div class="output">checked: {{ myCheckbox.checked }}</div>
|
|
<div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
|
|
<div class="output">checked: {{ checked }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Radios'>
|
|
<sky-box title='Group One'>
|
|
<div><sky-radio group='foo'/>one</div>
|
|
<div><sky-radio group='foo' selected='true' />two</div>
|
|
<div><sky-radio group='foo'/>three</div>
|
|
</sky-box>
|
|
<sky-box title='Group Two'>
|
|
<div><sky-radio group='bar'/>A</div>
|
|
<div><sky-radio group='bar'/>B</div>
|
|
<div><sky-radio group='bar' selected='true' />C</div>
|
|
</sky-box>
|
|
</sky-box>
|
|
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.myButton = null;
|
|
this.myCheckbox = null;
|
|
this.myText = null;
|
|
this.clickCount = 0;
|
|
this.inputValue = "Ready";
|
|
this.checked = false;
|
|
}
|
|
attached() {
|
|
this.myButton = this.shadowRoot.getElementById('button');
|
|
this.myCheckbox = this.shadowRoot.getElementById('checkbox');
|
|
this.myText = this.shadowRoot.getElementById('text');
|
|
this.clickCount = 0;
|
|
}
|
|
handleClick(event) {
|
|
this.clickCount++;
|
|
this.checked = !this.checked;
|
|
this.inputValue = "Moar clicking " + this.clickCount;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|
|
|
|
<widget-root />
|
|
</sky>
|