src/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 @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/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">
  45 <template>
  46
  47   <link rel="stylesheet" href="core-submenu.css">
  48
  49   <core-item src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : 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 <script>
  61
  62   Polymer('core-submenu', {
  63
  64     publish: {
  65       active: {value: false, reflect: true}
  66     },
  67
  68     opened: false,
  69
  70     get items() {
  71       return this.$.submenu.items;
  72     },
  73
  74     hasItems: function() {
  75       return !!this.items.length;
  76     },
  77
  78     unselectAllItems: function() {
  79       this.$.submenu.selected = null;
  80       this.$.submenu.clearSelection();
  81     },
  82
  83     activeChanged: function() {
  84       if (this.hasItems()) {
  85         this.opened = this.active;
  86       }
  87       if (!this.active) {
  88         this.unselectAllItems();
  89       }
  90     },
  91
  92     toggle: function() {
  93       this.opened = !this.opened;
  94     },
  95
  96     activate: function() {
  97       if (this.hasItems() && this.active) {
  98         this.toggle();
  99         this.unselectAllItems();
 100       }
 101     }
 102
 103   });
 104
 105 </script>
 106 </polymer-element>