eb117c7326
This CL updates sky-box, sky-button, sky-checkbox, sky-input, and sky-radio to work in Dart. We don't have a data binding system yet, so there's a bit more plumbing in the code. This CL adds support for sky-element@attributes, which lets you specify which attributes your element supports. We use this information to synthesize getters and setters for those attributes and to dispatch to mumbleChanged methods when the attributes change. I've also wrapped the widgets demo itself in a sky-scrollable so the whole thing scrolls. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/946813005
94 lines
2.6 KiB
Plaintext
94 lines
2.6 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/sky-box.sky" />
|
|
<import src="/sky/framework/sky-button.sky" />
|
|
<import src="/sky/framework/sky-checkbox.sky" />
|
|
<import src="/sky/framework/sky-element.sky" />
|
|
<import src="/sky/framework/sky-input.sky" />
|
|
<import src="/sky/framework/sky-radio.sky" />
|
|
<import src="/sky/framework/sky-scrollable.sky" />
|
|
<sky-element>
|
|
<template>
|
|
<style>
|
|
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'>
|
|
<sky-button id='button'>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>
|
|
</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>
|