five-bells-visualization/public/bower_components/core-menu/core-menu.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`core-menu` is a selector which styles to looks like a menu.

    <core-menu selected="0">
      <core-item icon="settings" label="Settings"></core-item>
      <core-item icon="dialog" label="Dialog"></core-item>
      <core-item icon="search" label="Search"></core-item>
    </core-menu>

When an item is selected the `core-selected` class is added to it.  The user can
use the class to add more stylings to the selected item.

    core-item.core-selected {
      color: red;
    }

The `selectedItem` property references the selected item.

    <core-menu selected="0" selectedItem="{{item}}">
      <core-item icon="settings" label="Settings"></core-item>
      <core-item icon="dialog" label="Dialog"></core-item>
      <core-item icon="search" label="Search"></core-item>
    </core-menu>

    <div>selected label: {{item.label}}</div>

The `core-select` event signals selection change.

    <core-menu selected="0" on-core-select="{{selectAction}}">
      <core-item icon="settings" label="Settings"></core-item>
      <core-item icon="dialog" label="Dialog"></core-item>
      <core-item icon="search" label="Search"></core-item>
    </core-menu>

    ...

    selectAction: function(e, detail) {
      if (detail.isSelected) {
        var selectedItem = detail.item;
        ...
      }
    }

@group Polymer Core Elements
@element core-menu
@extends core-selector
-->

<link rel="import" href="../core-selector/core-selector.html">
<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">

<polymer-element name="core-menu" extends="core-selector" noscript>
<template>

  <link rel="stylesheet" href="core-menu.css">

  <core-a11y-keys target="{{}}" keys="up" on-keys-pressed="{{ selectPrevious }}"></core-a11y-keys>
  <core-a11y-keys target="{{}}" keys="down" on-keys-pressed="{{ selectNext }}"></core-a11y-keys>
  <core-a11y-keys target="{{}}" keys="enter" on-keys-pressed="{{ validateSelected }}"></core-a11y-keys>

  <shadow></shadow>

</template>
</polymer-element>