<!-- // 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-box.sky"/> <import src="/sky/framework/sky-button/sky-button.sky"/> <import src="/sky/framework/sky-checkbox/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-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' />Checkbox</div> <div class="output">highlight: {{ myCheckbox.highlight }}</div> <div class="output">checked: {{ myCheckbox.checked }}</div> <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>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>