Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(100)

Side by Side Diff: sky/examples/widgets/index.sky

Issue 831353003: Implement <sky-input> (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | sky/framework/sky-input.sky » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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>
OLDNEW
« no previous file with comments | « no previous file | sky/framework/sky-input.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698