Commit 973cf80f authored by Adam Barth's avatar Adam Barth

Port sky-drawer to Dart

Also, port the "appish" example to exercise the drawer.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/942413002
parent eb117c73
......@@ -4,10 +4,10 @@
// 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-element.sky" />
<import src="/sky/framework/sky-scrollable.sky" />
<sky-element name="example-scaffold">
<sky-element>
<template>
<style>
:host {
......@@ -54,7 +54,7 @@
<content select=".menu"/>
</sky-drawer>
<sky-toolbar>
<div id="menu" on-click="handleMenuClick"/>
<div id="menu" />
<content id="title" select=".title"/>
</sky-toolbar>
<sky-scrollable>
......@@ -62,18 +62,23 @@
</sky-scrollable>
</template>
<script>
module.exports = class extends SkyElement {
created() {
this.toolbar_ = null;
}
import "dart:sky";
@Tagname('example-scaffold')
class ExampleScaffold extends SkyElement {
Element _drawer;
shadowRootReady() {
this.toolbar_ = this.shadowRoot.getElementById('drawer');
void shadowRootReady() {
_drawer = shadowRoot.getElementById('drawer');
Element menu = shadowRoot.getElementById('menu');
menu.addEventListener('click', _handleMenuClick);
}
handleMenuClick() {
this.toolbar_.toggle();
void _handleMenuClick(_) {
_drawer.toggle();
}
}.register();
}
_init(script) => register(script, ExampleScaffold);
</script>
</sky-element>
......@@ -4,23 +4,9 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<sky>
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
<import src="example-scaffold.sky" />
<sky-element name="example-app">
<template>
<example-scaffold>
<div class="title">Awesome app</div>
<div class="menu">This is a menu</div>
<div class="body">This is an awesome app.</div>
</example-scrollable>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
<example-app />
</sky>
<example-scaffold>
<div class="title">Awesome app</div>
<div class="menu">This is a menu</div>
<div class="body">This is an awesome app.</div>
</example-scrollable>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment