OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 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 <import src="/sky/framework/sky-box.sky" /> | 6 <import src="/sky/framework/sky-box.sky" /> |
7 <import src="/sky/framework/sky-button.sky" /> | 7 <import src="/sky/framework/sky-button.sky" /> |
8 <import src="/sky/framework/sky-checkbox.sky" /> | 8 <import src="/sky/framework/sky-checkbox.sky" /> |
9 <import src="/sky/framework/sky-element.sky" /> | 9 <import src="/sky/framework/sky-element.sky" /> |
10 <import src="/sky/framework/sky-input.sky" /> | 10 <import src="/sky/framework/sky-input.sky" /> |
11 <import src="/sky/framework/sky-radio.sky" /> | 11 <import src="/sky/framework/sky-radio.sky" /> |
12 <import src="/sky/framework/sky-scrollable.sky" /> | 12 <import src="/sky/framework/sky-scrollable.sky" /> |
13 <sky-element> | 13 <sky-element> |
14 <template> | 14 <template> |
15 <style> | 15 <style> |
| 16 :host { |
| 17 font-family: 'Roboto Regular', 'Helvetica'; |
| 18 } |
16 div { | 19 div { |
17 display: flex; | 20 display: flex; |
18 align-items: center; | 21 align-items: center; |
19 } | 22 } |
20 sky-checkbox { | 23 sky-checkbox { |
21 margin: 5px; | 24 margin: 5px; |
22 } | 25 } |
23 .output { | 26 .output { |
24 margin-left: 48px; | 27 margin-left: 48px; |
25 } | 28 } |
26 sky-scrollable { | 29 sky-scrollable { |
27 height: -webkit-fill-available; | 30 height: -webkit-fill-available; |
28 } | 31 } |
29 </style> | 32 </style> |
30 <sky-scrollable> | 33 <sky-scrollable> |
31 <sky-box title='Text'> | 34 <sky-box title='Text'> |
32 <sky-input id="text" value="{{ inputValue }}" /> | 35 <sky-input id="text" value="{{ inputValue }}" /> |
33 <div>value = {{ inputValue }}</div> | 36 <div>value = {{ inputValue }}</div> |
34 </sky-box> | 37 </sky-box> |
35 | 38 |
36 <sky-box title='Buttons'> | 39 <sky-box title='Buttons'> |
37 <sky-button id='button'>Button</sky-button> | 40 <div style="display: flex; flex-direction: horizontal"> |
38 <div>highlight: {{ myButton.highlight }}</div> | 41 <div style="flex:1" /> |
39 <div>clickCount: {{ clickCount }}</div> | 42 <sky-button level="1" id="button">CANCEL</sky-button> |
| 43 <sky-button level="1" primary>CONFIRM</sky-button> |
| 44 </div> |
40 </sky-box> | 45 </sky-box> |
41 | 46 |
42 <sky-box title='Checkboxes'> | 47 <sky-box title='Checkboxes'> |
43 <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div> | 48 <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div> |
44 <div class="output">highlight: {{ myCheckbox.highlight }}</div> | 49 <div class="output">highlight: {{ myCheckbox.highlight }}</div> |
45 <div class="output">checked: {{ myCheckbox.checked }}</div> | 50 <div class="output">checked: {{ myCheckbox.checked }}</div> |
46 <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked
.</div> | 51 <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked
.</div> |
47 <div class="output">checked: {{ checked }}</div> | 52 <div class="output">checked: {{ checked }}</div> |
48 </sky-box> | 53 </sky-box> |
49 | 54 |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
84 void _handleClick(_) { | 89 void _handleClick(_) { |
85 _clickCount++; | 90 _clickCount++; |
86 _checked = !_checked; | 91 _checked = !_checked; |
87 _inputValue = "Moar clicking ${_clickCount}"; | 92 _inputValue = "Moar clicking ${_clickCount}"; |
88 } | 93 } |
89 } | 94 } |
90 | 95 |
91 _init(script) => register(script, WidgetRoot); | 96 _init(script) => register(script, WidgetRoot); |
92 </script> | 97 </script> |
93 </sky-element> | 98 </sky-element> |
OLD | NEW |