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-element.sky" as="SkyElement" /> | 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 | 9 |
10 <sky-element name="example-scaffold"> | 10 <sky-element> |
11 <template> | 11 <template> |
12 <style> | 12 <style> |
13 :host { | 13 :host { |
14 display: flex; | 14 display: flex; |
15 flex-direction: column; | 15 flex-direction: column; |
16 height: -webkit-fill-available; | 16 height: -webkit-fill-available; |
17 } | 17 } |
18 sky-drawer { | 18 sky-drawer { |
19 position: absolute; | 19 position: absolute; |
20 z-index: 1; | 20 z-index: 1; |
(...skipping 26 matching lines...) Expand all Loading... |
47 } | 47 } |
48 sky-scrollable { | 48 sky-scrollable { |
49 flex: 1; | 49 flex: 1; |
50 background-color: green; | 50 background-color: green; |
51 } | 51 } |
52 </style> | 52 </style> |
53 <sky-drawer id="drawer"> | 53 <sky-drawer id="drawer"> |
54 <content select=".menu"/> | 54 <content select=".menu"/> |
55 </sky-drawer> | 55 </sky-drawer> |
56 <sky-toolbar> | 56 <sky-toolbar> |
57 <div id="menu" on-click="handleMenuClick"/> | 57 <div id="menu" /> |
58 <content id="title" select=".title"/> | 58 <content id="title" select=".title"/> |
59 </sky-toolbar> | 59 </sky-toolbar> |
60 <sky-scrollable> | 60 <sky-scrollable> |
61 <content /> | 61 <content /> |
62 </sky-scrollable> | 62 </sky-scrollable> |
63 </template> | 63 </template> |
64 <script> | 64 <script> |
65 module.exports = class extends SkyElement { | 65 import "dart:sky"; |
66 created() { | 66 |
67 this.toolbar_ = null; | 67 @Tagname('example-scaffold') |
| 68 class ExampleScaffold extends SkyElement { |
| 69 Element _drawer; |
| 70 |
| 71 void shadowRootReady() { |
| 72 _drawer = shadowRoot.getElementById('drawer'); |
| 73 Element menu = shadowRoot.getElementById('menu'); |
| 74 menu.addEventListener('click', _handleMenuClick); |
68 } | 75 } |
69 | 76 |
70 shadowRootReady() { | 77 void _handleMenuClick(_) { |
71 this.toolbar_ = this.shadowRoot.getElementById('drawer'); | 78 _drawer.toggle(); |
72 } | 79 } |
| 80 } |
73 | 81 |
74 handleMenuClick() { | 82 _init(script) => register(script, ExampleScaffold); |
75 this.toolbar_.toggle(); | |
76 } | |
77 }.register(); | |
78 </script> | 83 </script> |
79 </sky-element> | 84 </sky-element> |
OLD | NEW |