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

Unified Diff: sky/examples/example-scaffold.sky

Issue 886723002: Add sky-drawer to the framework (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: nit 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 side-by-side diff with in-line comments
Download patch
Index: sky/examples/example-scaffold.sky
diff --git a/sky/examples/example-scaffold.sky b/sky/examples/example-scaffold.sky
new file mode 100644
index 0000000000000000000000000000000000000000..82427927b2733e553b9a37fcd0430a10b2f40ef0
--- /dev/null
+++ b/sky/examples/example-scaffold.sky
@@ -0,0 +1,75 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-drawer.sky" />
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="/sky/framework/sky-scrollable.sky" />
+
+<sky-element name="example-scaffold">
+<template>
+ <style>
+ :host {
+ display: flex;
+ flex-direction: column;
+ height: -webkit-fill-available;
+ }
+ sky-drawer {
+ position: absolute;
+ z-index: 1;
+ }
+ sky-toolbar {
+ display: flex;
+ align-items: center;
+ background-color: #526E9C;
+ color: white;
+ height: 56px;
+ }
+ #menu {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 24px;
+ height: 24px;
+ padding: 7px;
+ margin: 0 8px;
+ background-color: papayawhip;
+ color: black;
+ }
+ #title {
+ flex: 1;
+ margin: 0 8px;
+ }
+ sky-scrollable {
+ flex: 1;
+ background-color: green;
+ }
+ </style>
+ <sky-drawer id="drawer">
+ <content select=".menu"/>
+ </sky-drawer>
+ <sky-toolbar>
+ <div id="menu" on-click="handleMenuClick"/>
+ <content id="title" select=".title"/>
+ </sky-toolbar>
+ <sky-scrollable>
+ <content />
+ </sky-scrollable>
+</template>
+<script>
+module.exports = class extends SkyElement {
+ created() {
+ this.toolbar_ = null;
+ }
+
+ shadowRootReady() {
+ this.toolbar_ = this.shadowRoot.getElementById('drawer');
+ }
+
+ handleMenuClick() {
+ this.toolbar_.toggle();
+ }
+}.register();
+</script>
+</sky-element>

Powered by Google App Engine
This is Rietveld 408576698