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-drawer.sky" /> | 6 <import src="/sky/framework/sky-drawer.sky" /> |
7 <import src="/sky/framework/sky-element.sky" /> | 7 <import src="/sky/framework/sky-element.sky" /> |
8 <import src="/sky/framework/sky-scrollable.sky" /> | 8 <import src="/sky/framework/sky-scrollable.sky" /> |
| 9 <import src="stock.sky" /> |
9 | 10 |
10 <sky-element> | 11 <sky-element> |
11 <template> | 12 <template> |
12 <style> | 13 <style> |
13 :host { | 14 :host { |
14 display: flex; | 15 display: flex; |
15 flex-direction: column; | 16 flex-direction: column; |
16 height: -webkit-fill-available; | 17 height: -webkit-fill-available; |
17 } | 18 } |
18 sky-drawer { | 19 sky-drawer { |
(...skipping 25 matching lines...) Expand all Loading... |
44 #title { | 45 #title { |
45 flex: 1; | 46 flex: 1; |
46 margin: 0 8px; | 47 margin: 0 8px; |
47 } | 48 } |
48 sky-scrollable { | 49 sky-scrollable { |
49 flex: 1; | 50 flex: 1; |
50 background-color: green; | 51 background-color: green; |
51 } | 52 } |
52 </style> | 53 </style> |
53 <sky-drawer id="drawer"> | 54 <sky-drawer id="drawer"> |
54 <content select=".menu"/> | 55 I am drawer |
55 </sky-drawer> | 56 </sky-drawer> |
56 <sky-toolbar> | 57 <sky-toolbar> |
57 <div id="menu" /> | 58 <div id="menu" /> |
58 <content id="title" select=".title"/> | 59 I am a stocks app |
59 </sky-toolbar> | 60 </sky-toolbar> |
60 <sky-scrollable> | 61 <sky-scrollable> |
61 <content /> | 62 <stock ticker="GOOG" /> |
| 63 <stock ticker="GOOGL" /> |
| 64 <stock ticker="GOOG" /> |
| 65 <stock ticker="GOOG" /> |
| 66 <stock ticker="GOOG" /> |
| 67 <stock ticker="GOOG" /> |
| 68 <stock ticker="GOOG" /> |
| 69 <stock ticker="GOOG" /> |
| 70 <stock ticker="GOOG" /> |
| 71 <stock ticker="GOOG" /> |
| 72 <stock ticker="GOOG" /> |
| 73 <stock ticker="GOOG" /> |
| 74 <stock ticker="GOOG" /> |
| 75 <stock ticker="GOOG" /> |
| 76 <stock ticker="GOOG" /> |
| 77 <stock ticker="GOOG" /> |
| 78 <stock ticker="GOOG" /> |
| 79 <stock ticker="GOOG" /> |
| 80 <stock ticker="GOOG" /> |
| 81 <stock ticker="GOOG" /> |
| 82 <stock ticker="GOOG" /> |
62 </sky-scrollable> | 83 </sky-scrollable> |
63 </template> | 84 </template> |
64 <script> | 85 <script> |
65 import "dart:sky"; | 86 import "dart:sky"; |
66 | 87 |
67 @Tagname('example-scaffold') | 88 @Tagname('stocks') |
68 class ExampleScaffold extends SkyElement { | 89 class Stocks extends SkyElement { |
69 Element _drawer; | 90 Element _drawer; |
70 | 91 |
71 void shadowRootReady() { | 92 void shadowRootReady() { |
72 _drawer = shadowRoot.getElementById('drawer'); | 93 _drawer = shadowRoot.getElementById('drawer'); |
73 Element menu = shadowRoot.getElementById('menu'); | 94 Element menu = shadowRoot.getElementById('menu'); |
74 menu.addEventListener('click', _handleMenuClick); | 95 menu.addEventListener('click', _handleMenuClick); |
75 } | 96 } |
76 | 97 |
77 void _handleMenuClick(_) { | 98 void _handleMenuClick(_) { |
78 _drawer.toggle(); | 99 _drawer.toggle(); |
79 } | 100 } |
80 } | 101 } |
81 | 102 |
82 _init(script) => register(script, ExampleScaffold); | 103 _init(script) => register(script, Stocks); |
83 </script> | 104 </script> |
84 </sky-element> | 105 </sky-element> |
OLD | NEW |