mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
0a258c1921
Now instead of calling addEventListener inside the created() callback you just
add on-{eventName} attributes to the <sky-element> around your element
definition. The attribute defines what method on your element to call when the
event with {eventName} is dispatched through your element.
Implementing this required refactoring how sky-element.sky stored information
from each registered element. Now instead of storing just a map of templates
we store a map of ElementRegistration objects which have metadata about the
element. Future patches will combine this system with the element registration
system in sky-binder.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/845283003
50 lines
1.1 KiB
Plaintext
50 lines
1.1 KiB
Plaintext
<!--
|
|
// Copyright 2014 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-element/sky-element.sky" as="SkyElement" />
|
|
|
|
<sky-element
|
|
name="sky-button"
|
|
attributes="highlight:boolean"
|
|
on-mousedown="handleMouseDown"
|
|
on-mouseup="handleMouseUp"
|
|
on-mouseout="handleMouseOut">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: inline-flex;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid blue;
|
|
-webkit-user-select: none;
|
|
margin: 5px;
|
|
}
|
|
:host([highlight=true]) {
|
|
background-color: orange;
|
|
}
|
|
</style>
|
|
<content />
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
super.created();
|
|
|
|
this.tabIndex = 0; // Make focusable.
|
|
}
|
|
handleMouseDown() {
|
|
this.highlight = true;
|
|
}
|
|
handleMouseUp() {
|
|
this.highlight = false;
|
|
}
|
|
handleMouseOut() {
|
|
this.highlight = false;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|