mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
6987f50834
We're not actively developing these at the moment. I could also just delete them, not sure if we're ready for that yet. TBR=abarth@chromium.org Review URL: https://codereview.chromium.org/999873002
99 lines
2.8 KiB
Plaintext
99 lines
2.8 KiB
Plaintext
<!--
|
|
// Copyright 2015 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/elements/sky-box.sky" />
|
|
<import src="/sky/framework/elements/sky-button.sky" />
|
|
<import src="/sky/framework/elements/sky-checkbox.sky" />
|
|
<import src="/sky/framework/elements/sky-element.sky" />
|
|
<import src="/sky/framework/elements/sky-input.sky" />
|
|
<import src="/sky/framework/elements/sky-radio.sky" />
|
|
<import src="/sky/framework/elements/sky-scrollable.sky" />
|
|
<sky-element>
|
|
<template>
|
|
<style>
|
|
:host {
|
|
font-family: 'Roboto Regular', 'Helvetica';
|
|
}
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
sky-checkbox {
|
|
margin: 5px;
|
|
}
|
|
.output {
|
|
margin-left: 48px;
|
|
}
|
|
sky-scrollable {
|
|
height: -webkit-fill-available;
|
|
}
|
|
</style>
|
|
<sky-scrollable>
|
|
<sky-box title='Text'>
|
|
<sky-input id="text" value="{{ inputValue }}" />
|
|
<div>value = {{ inputValue }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Buttons'>
|
|
<div style="display: flex; flex-direction: horizontal">
|
|
<div style="flex:1" />
|
|
<sky-button level="1" id="button">CANCEL</sky-button>
|
|
<sky-button level="1" primary>CONFIRM</sky-button>
|
|
</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>
|
|
</sky-scrollable>
|
|
</template>
|
|
<script>
|
|
import "dart:sky";
|
|
|
|
@Tagname('widget-root')
|
|
class WidgetRoot extends SkyElement {
|
|
Element _button;
|
|
Element _checkbox;
|
|
Element _text;
|
|
int _clickCount = 0;
|
|
String _inputValue = "Ready";
|
|
bool _checked = false;
|
|
|
|
void shadowRootReady() {
|
|
_button = this.shadowRoot.getElementById('button');
|
|
_checkbox = this.shadowRoot.getElementById('checkbox');
|
|
_text = this.shadowRoot.getElementById('text');
|
|
|
|
_button.addEventListener('click', _handleClick);
|
|
}
|
|
|
|
void _handleClick(_) {
|
|
_clickCount++;
|
|
_checked = !_checked;
|
|
_inputValue = "Moar clicking ${_clickCount}";
|
|
}
|
|
}
|
|
|
|
_init(script) => register(script, WidgetRoot);
|
|
</script>
|
|
</sky-element>
|