xref: /external/chromium_org/third_party/polymer/components/core-menu/core-menu.html

<!--
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="stylesheet" href="core-menu.css" shim-shadowdom>

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