<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> <link rel="import" href="../iron-behaviors/iron-control-state.html"> <link rel="import" href="../iron-collapse/iron-collapse.html"> <link rel="import" href="../paper-styles/paper-styles.html"> <!-- `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It consists of a trigger that expands or collapses another `<paper-menu>`: <paper-menu> <paper-submenu> <paper-item class="menu-trigger">Topics</paper-item> <paper-menu class="menu-content"> <paper-item>Topic 1</paper-item> <paper-item>Topic 2</paper-item> <paper-item>Topic 3</paper-item> </paper-menu> </paper-submenu> <paper-submenu> <paper-item class="menu-trigger">Faves</paper-item> <paper-menu class="menu-content"> <paper-item>Fave 1</paper-item> <paper-item>Fave 2</paper-item> </paper-menu> </paper-submenu> <paper-submenu disabled> <paper-item class="menu-trigger">Unavailable</paper-item> <paper-menu class="menu-content"> <paper-item>Disabled 1</paper-item> <paper-item>Disabled 2</paper-item> </paper-menu> </paper-submenu> </paper-menu> Just like in `<paper-menu>`, the focused item is highlighted, and the selected item has bolded text. Please see the `<paper-menu>` docs for which attributes (such as `multi` and `selected`), and styling options are available for the `menu-content` menu. @group Paper Elements @element paper-submenu @hero hero.svg @demo demo/index.html --> <dom-module id="paper-submenu"> <link rel="import" type="css" href="paper-menu-shared.css"> <template> <div class="selectable-content" on-tap="_onTap"> <content id="trigger" select=".menu-trigger"></content> </div> <iron-collapse id="collapse" opened="{{opened}}"> <content select=".menu-content"></content> </iron-collapse> </template> </dom-module> <script> (function() { Polymer({ is: 'paper-submenu', properties: { /** * Fired when the submenu is opened. * * @event paper-submenu-open */ /** * Fired when the submenu is closed. * * @event paper-submenu-close */ /** * Set opened to true to show the collapse element and to false to hide it. * * @attribute opened */ opened: { type: Boolean, value: false, notify: true, observer: '_openedChanged' } }, behaviors: [ Polymer.IronControlState ], get __parent() { return Polymer.dom(this).parentNode; }, get __trigger() { return Polymer.dom(this.$.trigger).getDistributedNodes()[0]; }, attached: function() { this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); }, dettached: function() { this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); }, /** * Expand the submenu content. */ open: function() { if (this.disabled) return; this.$.collapse.show(); this._active = true; this.__trigger.classList.add('iron-selected'); }, /** * Collapse the submenu content. */ close: function() { this.$.collapse.hide(); this._active = false; this.__trigger.classList.remove('iron-selected'); }, /** * A handler that is called when the trigger is tapped. */ _onTap: function() { if (this.disabled) return; this.$.collapse.toggle(); }, /** * Toggles the submenu content when the trigger is tapped. */ _openedChanged: function(opened, oldOpened) { if (opened) { this.fire('paper-submenu-open'); } else if (oldOpened != null) { this.fire('paper-submenu-close'); } }, /** * A handler that is called when `iron-activate` is fired. * * @param {CustomEvent} event An `iron-activate` event. */ _onParentIronActivate: function(event) { if (Polymer.Gestures.findOriginalTarget(event) !== this.__parent) { return; } // The activated item can either be this submenu, in which case it // should be expanded, or any of the other sibling submenus, in which // case this submenu should be collapsed. if (event.detail.item == this) { if (this._active) return; this.open(); } else { this.close(); } }, /** * If the dropdown is open when disabled becomes true, close the * dropdown. * * @param {boolean} disabled True if disabled, otherwise false. */ _disabledChanged: function(disabled) { Polymer.IronControlState._disabledChanged.apply(this, arguments); if (disabled && this._active) { this.close(); } } }); })(); </script>