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> |