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 Use to create nested menus inside of `core-menu` elements.
  10
  11     <core-menu selected="0">
  12
  13       <core-submenu icon="settings" label="Topics">
  14         <core-item label="Topic 1"></core-item>
  15         <core-item label="Topic 2"></core-item>
  16       </core-submenu>
  17
  18       <core-submenu icon="settings" label="Favorites">
  19         <core-item label="Favorite 1"></core-item>
  20         <core-item label="Favorite 2"></core-item>
  21         <core-item label="Favorite 3"></core-item>
  22       </core-submenu>
  23
  24     </core-menu>
  25
  26 There is a margin set on the submenu to indent the items.
  27 You can override the margin by doing:
  28
  29     core-submenu::shadow #submenu {
  30       margin-left: 20px;
  31     }
  32
  33 To style the item for the submenu, do something like this:
  34
  35     core-submenu::shadow > #submenuItem {
  36       color: blue;
  37     }
  38
  39 To style all the `core-item`s in the light DOM:
  40
  41     polyfill-next-selector { content: 'core-submenu > #submenu > core-item'; }
  42     core-submenu > core-item {
  43       color: red;
  44     }
  45
  46 The above will style `Topic1` and `Topic2` to have font color red.
  47
  48     <core-submenu icon="settings" label="Topics">
  49       <core-item label="Topic1"></core-item>
  50       <core-item label="Topic2"></core-item>
  51     </core-submenu>
  52
  53 @group Polymer Core Elements
  54 @element core-submenu
  55 @extends core-item
  56 --><html><head><link rel="import" href="../core-item/core-item.html">
  57 <link rel="import" href="core-menu.html">
  58 <link rel="import" href="../core-collapse/core-collapse.html">
  59
  60 </head><body><polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr" assetpath="">
  61 <template>
  62
  63   <link rel="stylesheet" href="core-submenu.css">
  64
  65   <core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
  66     <content select=".item-content"></content>
  67   </core-item>
  68
  69   <core-menu id="submenu" selected="{{selected}}" selecteditem="{{selectedItem}}" valueattr="{{valueattr}}">
  70     <content></content>
  71   </core-menu>
  72
  73   <core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
  74
  75 </template>
  76
  77 </polymer-element>
  78 <script charset="utf-8" src="core-submenu-extracted.js"></script></body></html>