1<!-- 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6Code distributed by Google as part of the polymer project is also 7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8--> 9 10<!-- 11`core-menu` is a selector which styles to looks like a menu. 12 13 <core-menu selected="0"> 14 <core-item icon="settings" label="Settings"></core-item> 15 <core-item icon="dialog" label="Dialog"></core-item> 16 <core-item icon="search" label="Search"></core-item> 17 </core-menu> 18 19When an item is selected the `core-selected` class is added to it. The user can 20use the class to add more stylings to the selected item. 21 22 core-item.core-selected { 23 color: red; 24 } 25 26The `selectedItem` property references the selected item. 27 28 <core-menu selected="0" selectedItem="{{item}}"> 29 <core-item icon="settings" label="Settings"></core-item> 30 <core-item icon="dialog" label="Dialog"></core-item> 31 <core-item icon="search" label="Search"></core-item> 32 </core-menu> 33 34 <div>selected label: {{item.label}}</div> 35 36The `core-select` event signals selection change. 37 38 <core-menu selected="0" on-core-select="{{selectAction}}"> 39 <core-item icon="settings" label="Settings"></core-item> 40 <core-item icon="dialog" label="Dialog"></core-item> 41 <core-item icon="search" label="Search"></core-item> 42 </core-menu> 43 44 ... 45 46 selectAction: function(e, detail) { 47 if (detail.isSelected) { 48 var selectedItem = detail.item; 49 ... 50 } 51 } 52 53@group Polymer Core Elements 54@element core-menu 55@extends core-selector 56--> 57 58<link rel="import" href="/core-selector/core-selector.html"> 59 60<link rel="stylesheet" href="core-menu.css" shim-shadowdom> 61 62<polymer-element name="core-menu" extends="core-selector" noscript></polymer-element> 63