sky/framework/sky-button.sky

<!--
// 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-element.sky" />

<sky-element attributes="highlight:boolean">
<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>
import "dart:sky";

@Tagname('sky-button')
class SkyButton extends SkyElement {
  SkyButton() {
    addEventListener('pointerdown', _handlePointerDown);
    addEventListener('pointerup', _handlePointerUp);
    addEventListener('pointercancel', _handlePointerCancel);

    tabIndex = 0; // Make focusable.
  }

  void _handlePointerDown(_) {
    highlight = true;
  }

  void _handlePointerUp(_) {
    highlight = false;
  }

  void _handlePointerCancel(_) {
    highlight = false;
  }
}

_init(script) => register(script, SkyButton);
</script>
</sky-element>