third_party/polymer/v1_0/components-chromium/paper-menu/paper-submenu.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
  11 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  12 <link rel="import" href="../iron-collapse/iron-collapse.html">
  13 <link rel="import" href="../paper-styles/paper-styles.html">
  14
  15 <!--
  16 `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It
  17 consists of a trigger that expands or collapses another `<paper-menu>`:
  18
  19     <paper-menu>
  20       <paper-submenu>
  21         <paper-item class="menu-trigger">Topics</paper-item>
  22         <paper-menu class="menu-content">
  23           <paper-item>Topic 1</paper-item>
  24           <paper-item>Topic 2</paper-item>
  25           <paper-item>Topic 3</paper-item>
  26         </paper-menu>
  27       </paper-submenu>
  28       <paper-submenu>
  29         <paper-item class="menu-trigger">Faves</paper-item>
  30         <paper-menu class="menu-content">
  31           <paper-item>Fave 1</paper-item>
  32           <paper-item>Fave 2</paper-item>
  33         </paper-menu>
  34       </paper-submenu>
  35       <paper-submenu disabled>
  36         <paper-item class="menu-trigger">Unavailable</paper-item>
  37         <paper-menu class="menu-content">
  38           <paper-item>Disabled 1</paper-item>
  39           <paper-item>Disabled 2</paper-item>
  40         </paper-menu>
  41       </paper-submenu>
  42     </paper-menu>
  43
  44 Just like in `<paper-menu>`, the focused item is highlighted, and the selected
  45 item has bolded text. Please see the `<paper-menu>` docs for which attributes
  46 (such as `multi` and `selected`), and styling options are available for the
  47 `menu-content` menu.
  48
  49 @group Paper Elements
  50 @element paper-submenu
  51 @hero hero.svg
  52 @demo demo/index.html
  53 -->
  54
  55 </head><body><dom-module id="paper-submenu">
  56   <link rel="import" type="css" href="paper-menu-shared.css">
  57
  58   <template>
  59     <div class="selectable-content" on-tap="_onTap">
  60       <content id="trigger" select=".menu-trigger"></content>
  61     </div>
  62     <iron-collapse id="collapse" opened="{{opened}}">
  63       <content select=".menu-content"></content>
  64     </iron-collapse>
  65   </template>
  66
  67 </dom-module>
  68
  69 <script src="paper-submenu-extracted.js"></script></body></html>