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

Side by Side Diff: sky/examples/example-scaffold.sky

Issue 942413002: Port sky-drawer to Dart (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 10 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 | « sky/examples/appish/index.sky ('k') | sky/framework/animation/controller.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!--
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
4 // found in the LICENSE file.
5 -->
6 <import src="/sky/framework/sky-drawer.sky" />
7 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
8 <import src="/sky/framework/sky-scrollable.sky" />
9
10 <sky-element name="example-scaffold">
11 <template>
12 <style>
13 :host {
14 display: flex;
15 flex-direction: column;
16 height: -webkit-fill-available;
17 }
18 sky-drawer {
19 position: absolute;
20 z-index: 1;
21 top: 0;
22 left: 0;
23 bottom: 0;
24 right: 0;
25 }
26 sky-toolbar {
27 display: flex;
28 align-items: center;
29 background-color: #526E9C;
30 color: white;
31 height: 56px;
32 }
33 #menu {
34 display: flex;
35 justify-content: center;
36 align-items: center;
37 width: 24px;
38 height: 24px;
39 padding: 7px;
40 margin: 0 8px;
41 background-color: papayawhip;
42 color: black;
43 }
44 #title {
45 flex: 1;
46 margin: 0 8px;
47 }
48 sky-scrollable {
49 flex: 1;
50 background-color: green;
51 }
52 </style>
53 <sky-drawer id="drawer">
54 <content select=".menu"/>
55 </sky-drawer>
56 <sky-toolbar>
57 <div id="menu" on-click="handleMenuClick"/>
58 <content id="title" select=".title"/>
59 </sky-toolbar>
60 <sky-scrollable>
61 <content />
62 </sky-scrollable>
63 </template>
64 <script>
65 module.exports = class extends SkyElement {
66 created() {
67 this.toolbar_ = null;
68 }
69
70 shadowRootReady() {
71 this.toolbar_ = this.shadowRoot.getElementById('drawer');
72 }
73
74 handleMenuClick() {
75 this.toolbar_.toggle();
76 }
77 }.register();
78 </script>
79 </sky-element>
OLDNEW
« no previous file with comments | « sky/examples/appish/index.sky ('k') | sky/framework/animation/controller.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698