mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
bdaf418370
Eventually we'll want to replace these with something fancier like polymer, but this exercise helped us find several bugs in the engine as well as removed one more blocker from using Sky to replace mojo/views usage in mojo/examples. R=esprehn@chromium.org BUG=443439 Review URL: https://codereview.chromium.org/809233002
50 lines
1.2 KiB
Plaintext
50 lines
1.2 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">
|
|
<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></content>
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.tabIndex = 0; // Make focusable.
|
|
this.setHighlight(false);
|
|
|
|
this.addEventListener("mousedown", function() {
|
|
this.setHighlight(true);
|
|
});
|
|
this.addEventListener("mouseup", function() {
|
|
this.setHighlight(false);
|
|
});
|
|
this.addEventListener("mouseout", function() {
|
|
this.setHighlight(false);
|
|
});
|
|
}
|
|
setHighlight(newValue) {
|
|
// Set both a property and an attribute to keep both parents happy.
|
|
this.setAttribute('highlight', newValue);
|
|
this.highlight = newValue;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|