src/third_party/polymer/components-chromium/core-menu/core-submenu.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   8 -->
   9
  10 <!--
  11 Use to create nested menus inside of `core-menu` elements.
  12
  13     <core-menu selected="0">
  14
  15       <core-submenu icon="settings" label="Topics">
  16         <core-item label="Topic 1"></core-item>
  17         <core-item label="Topic 2"></core-item>
  18       </core-submenu>
  19
  20       <core-submenu icon="settings" label="Favorites">
  21         <core-item label="Favorite 1"></core-item>
  22         <core-item label="Favorite 2"></core-item>
  23         <core-item label="Favorite 3"></core-item>
  24       </core-submenu>
  25
  26     </core-menu>
  27
  28 There is a margin set on the submenu to indent the items.
  29 You can override the margin by doing:
  30
  31     core-submenu::shadow #submenu {
  32       margin-left: 20px;
  33     }
  34
  35 @group Polymer Core Elements
  36 @element core-submenu
  37 @extends core-item
  38 -->
  39
  40 <link rel="import" href="../core-item/core-item.html">
  41 <link rel="import" href="core-menu.html">
  42 <link rel="import" href="../core-collapse/core-collapse.html">
  43
  44 <polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr" assetpath="">
  45 <template>
  46
  47   <link rel="stylesheet" href="core-submenu.css">
  48
  49   <core-item src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {&apos;core-selected&apos; : active} | tokenList}}" on-tap="{{activate}}">
  50     <content select=".item-content"></content>
  51   </core-item>
  52
  53   <core-menu id="submenu" selected="{{selected}}" selecteditem="{{selectedItem}}" valueattr="{{valueattr}}">
  54     <content></content>
  55   </core-menu>
  56
  57   <core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
  58
  59 </template>
  60
  61 </polymer-element>
  62 <script src="core-submenu-extracted.js"></script>