OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2014 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <sky> | 6 <sky> |
| 7 <import src="/sky/framework/sky-box/sky-box.sky"/> |
| 8 <import src="/sky/framework/sky-button/sky-button.sky"/> |
| 9 <import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/> |
7 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/> | 10 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/> |
8 <import src="/sky/framework/sky-button/sky-button.sky"/> | 11 <import src="/sky/framework/sky-input.sky"/> |
9 <import src="/sky/framework/sky-box/sky-box.sky"/> | |
10 <import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/> | |
11 <import src="/sky/framework/sky-radio/sky-radio.sky"/> | 12 <import src="/sky/framework/sky-radio/sky-radio.sky"/> |
12 <sky-element name="widget-root"> | 13 <sky-element name="widget-root"> |
13 <template> | 14 <template> |
14 <style> | 15 <style> |
15 div { | 16 div { |
16 display: flex; | 17 display: flex; |
17 align-items: center; | 18 align-items: center; |
18 } | 19 } |
19 sky-checkbox { | 20 sky-checkbox { |
20 margin: 5px; | 21 margin: 5px; |
21 } | 22 } |
22 .output { | 23 .output { |
23 margin-left: 48px; | 24 margin-left: 48px; |
24 } | 25 } |
25 </style> | 26 </style> |
26 | 27 |
| 28 <sky-input id="text" value="Ready" /> |
| 29 |
27 <sky-box title='Buttons'> | 30 <sky-box title='Buttons'> |
28 <sky-button id='button' on-click='handleClick'>Button</sky-button> | 31 <sky-button id='button' on-click='handleClick'>Button</sky-button> |
29 <div>highlight: {{ myButton.highlight }}</div> | 32 <div>highlight: {{ myButton.highlight }}</div> |
30 <div>clickCount: {{ clickCount }}</div> | 33 <div>clickCount: {{ clickCount }}</div> |
31 </sky-box> | 34 </sky-box> |
32 | 35 |
33 <sky-box title='Checkboxes'> | 36 <sky-box title='Checkboxes'> |
34 <div><sky-checkbox id='checkbox' />Checkbox</div> | 37 <div><sky-checkbox id='checkbox' />Checkbox</div> |
35 <div class="output">highlight: {{ myCheckbox.highlight }}</div> | 38 <div class="output">highlight: {{ myCheckbox.highlight }}</div> |
36 <div class="output">checked: {{ myCheckbox.checked }}</div> | 39 <div class="output">checked: {{ myCheckbox.checked }}</div> |
(...skipping 12 matching lines...) Expand all Loading... |
49 <div><sky-radio group='bar' selected='true' />C</div> | 52 <div><sky-radio group='bar' selected='true' />C</div> |
50 </sky-box> | 53 </sky-box> |
51 </sky-box> | 54 </sky-box> |
52 | 55 |
53 </template> | 56 </template> |
54 <script> | 57 <script> |
55 module.exports = class extends SkyElement { | 58 module.exports = class extends SkyElement { |
56 attached() { | 59 attached() { |
57 this.myButton = this.shadowRoot.getElementById('button'); | 60 this.myButton = this.shadowRoot.getElementById('button'); |
58 this.myCheckbox = this.shadowRoot.getElementById('checkbox'); | 61 this.myCheckbox = this.shadowRoot.getElementById('checkbox'); |
| 62 this.myText = this.shadowRoot.getElementById('text'); |
59 this.clickCount = 0; | 63 this.clickCount = 0; |
60 } | 64 } |
61 handleClick(event) { | 65 handleClick(event) { |
62 this.clickCount++; | 66 this.clickCount++; |
| 67 this.myText.value = "Moar clicking " + this.clickCount; |
63 } | 68 } |
64 }.register(); | 69 }.register(); |
65 </script> | 70 </script> |
66 </sky-element> | 71 </sky-element> |
67 | 72 |
68 <widget-root /> | 73 <widget-root /> |
69 </sky> | 74 </sky> |
OLD | NEW |