third_party/polymer/components/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 To style the item for the submenu, do something like this:
  36
  37     core-submenu::shadow > #submenuItem {
  38       color: blue;
  39     }
  40
  41 To style all the `core-item`s in the light DOM:
  42
  43     polyfill-next-selector { content: 'core-submenu > #submenu > core-item'; }
  44     core-submenu > core-item {
  45       color: red;
  46     }
  47
  48 The above will style `Topic1` and `Topic2` to have font color red.
  49
  50     <core-submenu icon="settings" label="Topics">
  51       <core-item label="Topic1"></core-item>
  52       <core-item label="Topic2"></core-item>
  53     </core-submenu>
  54
  55 @group Polymer Core Elements
  56 @element core-submenu
  57 @extends core-item
  58 -->
  59
  60 <link rel="import" href="../core-item/core-item.html">
  61 <link rel="import" href="../core-menu/core-menu.html">
  62 <link rel="import" href="../core-collapse/core-collapse.html">
  63
  64 <polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr">
  65 <template>
  66
  67   <link rel="stylesheet" href="core-submenu.css">
  68
  69   <core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
  70     <content select=".item-content"></content>
  71   </core-item>
  72
  73   <core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" valueattr="{{valueattr}}">
  74     <content></content>
  75   </core-menu>
  76
  77   <core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
  78
  79 </template>
  80 <script>
  81
  82   Polymer('core-submenu', {
  83
  84     publish: {
  85       active: {value: false, reflect: true}
  86     },
  87
  88     opened: false,
  89
  90     get items() {
  91       return this.$.submenu.items;
  92     },
  93
  94     hasItems: function() {
  95       return !!this.items.length;
  96     },
  97
  98     unselectAllItems: function() {
  99       this.$.submenu.selected = null;
 100       this.$.submenu.clearSelection();
 101     },
 102
 103     activeChanged: function() {
 104       if (this.hasItems()) {
 105         this.opened = this.active;
 106       }
 107       if (!this.active) {
 108         this.unselectAllItems();
 109       }
 110     },
 111
 112     toggle: function() {
 113       this.opened = !this.opened;
 114     },
 115
 116     activate: function() {
 117       if (this.hasItems() && this.active) {
 118         this.toggle();
 119         this.unselectAllItems();
 120       }
 121     }
 122
 123   });
 124
 125 </script>
 126 </polymer-element>