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"/> | 7 <import src="/sky/framework/sky-box/sky-box.sky"/> |
8 <import src="/sky/framework/sky-button/sky-button.sky"/> | 8 <import src="/sky/framework/sky-button/sky-button.sky"/> |
9 <import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/> | 9 <import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/> |
10 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/> | 10 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/> |
11 <import src="/sky/framework/sky-input.sky"/> | 11 <import src="/sky/framework/sky-input.sky"/> |
12 <import src="/sky/framework/sky-radio/sky-radio.sky"/> | 12 <import src="/sky/framework/sky-radio/sky-radio.sky"/> |
13 <sky-element name="widget-root"> | 13 <sky-element name="widget-root"> |
14 <template> | 14 <template> |
15 <style> | 15 <style> |
16 div { | 16 div { |
17 display: flex; | 17 display: flex; |
18 align-items: center; | 18 align-items: center; |
19 } | 19 } |
20 sky-checkbox { | 20 sky-checkbox { |
21 margin: 5px; | 21 margin: 5px; |
22 } | 22 } |
23 .output { | 23 .output { |
24 margin-left: 48px; | 24 margin-left: 48px; |
25 } | 25 } |
26 </style> | 26 </style> |
27 | 27 |
28 <sky-input id="text" value="Ready" /> | 28 <sky-box title='Text'> |
| 29 <sky-input id="text" value="{{ inputValue }}" /> |
| 30 <div>value = {{ inputValue }}</div> |
| 31 </sky-box> |
29 | 32 |
30 <sky-box title='Buttons'> | 33 <sky-box title='Buttons'> |
31 <sky-button id='button' on-click='handleClick'>Button</sky-button> | 34 <sky-button id='button' on-click='handleClick'>Button</sky-button> |
32 <div>highlight: {{ myButton.highlight }}</div> | 35 <div>highlight: {{ myButton.highlight }}</div> |
33 <div>clickCount: {{ clickCount }}</div> | 36 <div>clickCount: {{ clickCount }}</div> |
34 </sky-box> | 37 </sky-box> |
35 | 38 |
36 <sky-box title='Checkboxes'> | 39 <sky-box title='Checkboxes'> |
37 <div><sky-checkbox id='checkbox' />Checkbox</div> | 40 <div><sky-checkbox id='checkbox' />Checkbox</div> |
38 <div class="output">highlight: {{ myCheckbox.highlight }}</div> | 41 <div class="output">highlight: {{ myCheckbox.highlight }}</div> |
39 <div class="output">checked: {{ myCheckbox.checked }}</div> | 42 <div class="output">checked: {{ myCheckbox.checked }}</div> |
40 <div><sky-checkbox id='checkbox' checked='true'/>Checkbox, default checked.<
/div> | 43 <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox, default
checked.</div> |
| 44 <div class="output">checked: {{ checked }}</div> |
41 </sky-box> | 45 </sky-box> |
42 | 46 |
43 <sky-box title='Radios'> | 47 <sky-box title='Radios'> |
44 <sky-box title='Group One'> | 48 <sky-box title='Group One'> |
45 <div><sky-radio group='foo'/>one</div> | 49 <div><sky-radio group='foo'/>one</div> |
46 <div><sky-radio group='foo' selected='true' />two</div> | 50 <div><sky-radio group='foo' selected='true' />two</div> |
47 <div><sky-radio group='foo'/>three</div> | 51 <div><sky-radio group='foo'/>three</div> |
48 </sky-box> | 52 </sky-box> |
49 <sky-box title='Group Two'> | 53 <sky-box title='Group Two'> |
50 <div><sky-radio group='bar'/>A</div> | 54 <div><sky-radio group='bar'/>A</div> |
51 <div><sky-radio group='bar'/>B</div> | 55 <div><sky-radio group='bar'/>B</div> |
52 <div><sky-radio group='bar' selected='true' />C</div> | 56 <div><sky-radio group='bar' selected='true' />C</div> |
53 </sky-box> | 57 </sky-box> |
54 </sky-box> | 58 </sky-box> |
55 | 59 |
56 </template> | 60 </template> |
57 <script> | 61 <script> |
58 module.exports = class extends SkyElement { | 62 module.exports = class extends SkyElement { |
59 created() { | 63 created() { |
60 this.myButton = null; | 64 this.myButton = null; |
61 this.myCheckbox = null; | 65 this.myCheckbox = null; |
62 this.myText = null; | 66 this.myText = null; |
63 this.clickCount = 0; | 67 this.clickCount = 0; |
| 68 this.inputValue = "Ready"; |
| 69 this.checked = false; |
64 } | 70 } |
65 attached() { | 71 attached() { |
66 this.myButton = this.shadowRoot.getElementById('button'); | 72 this.myButton = this.shadowRoot.getElementById('button'); |
67 this.myCheckbox = this.shadowRoot.getElementById('checkbox'); | 73 this.myCheckbox = this.shadowRoot.getElementById('checkbox'); |
68 this.myText = this.shadowRoot.getElementById('text'); | 74 this.myText = this.shadowRoot.getElementById('text'); |
69 this.clickCount = 0; | 75 this.clickCount = 0; |
70 } | 76 } |
71 handleClick(event) { | 77 handleClick(event) { |
72 this.clickCount++; | 78 this.clickCount++; |
73 this.myText.value = "Moar clicking " + this.clickCount; | 79 this.checked = !this.checked; |
| 80 this.inputValue = "Moar clicking " + this.clickCount; |
74 } | 81 } |
75 }.register(); | 82 }.register(); |
76 </script> | 83 </script> |
77 </sky-element> | 84 </sky-element> |
78 | 85 |
79 <widget-root /> | 86 <widget-root /> |
80 </sky> | 87 </sky> |
OLD | NEW |