Add super-basic sky widgets.

Eventually we'll want to replace these with something
fancier like polymer, but this exercise helped us
find several bugs in the engine as well as
removed one more blocker from using Sky to
replace mojo/views usage in mojo/examples.

R=esprehn@chromium.org
BUG=443439

Review URL: https://codereview.chromium.org/809233002
This commit is contained in:
Eric Seidel 2014-12-18 13:01:43 -08:00
parent 5f6c32c247
commit be756e7329

View File

@ -0,0 +1,56 @@
<!--
// 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-element/sky-element.sky"/>
<import src="/sky/framework/sky-button/sky-button.sky"/>
<import src="/sky/framework/sky-box/sky-box.sky"/>
<import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/>
<import src="/sky/framework/sky-radio/sky-radio.sky"/>
<sky-element name="widget-root">
<template>
<style>
div { display: paragraph; }
</style>
<sky-box title='Buttons'>
<sky-button id='button'>Button</sky-button>
<div>highlight: {{ myButton.highlight }}</div>
</sky-box>
<sky-box title='Checkboxes'>
<div><sky-checkbox id='checkbox' />Checkbox</div>
<div>highlight: {{ myCheckbox.highlight }}</div>
<div>checked: {{ myCheckbox.checked }}</div>
<div><sky-checkbox id='checkbox' checked='true'/>Checkbox, default 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 {
attached() {
this.myButton = this.shadowRoot.getElementById('button');
this.myCheckbox = this.shadowRoot.getElementById('checkbox');
}
}.register();
</script>
</sky-element>
<widget-root />
</sky>