third_party/polymer/components-chromium/core-menu-button/core-menu-button.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.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   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.txt
   8 --><!--
   9
  10 `core-menu-button` works together with a button and `core-dropdown` to implement
  11 an button that displays a drop-down when tapped on.
  12
  13 The child element with the class `dropdown` will be used as the drop-down
  14 menu. It should be a `core-dropdown` or other overlay element.
  15
  16 Example:
  17
  18     <core-menu-button>
  19         <core-icon-button icon="menu"></core-icon-button>
  20         <core-dropdown class="dropdown" layered>
  21             <core-menu>
  22                 <core-item>Share</core-item>
  23                 <core-item>Settings</core-item>
  24                 <core-item>Help</core-item>
  25             </core-menu>
  26         </core-dropdown>
  27     </core-menu-button>
  28
  29 @module Polymer Core Elements
  30 @element core-menu-button
  31 @extends core-dropdown-base
  32 @status beta
  33 @homepage github.io
  34 --><html><head><link href="../polymer/polymer.html" rel="import">
  35 <link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
  36 <link href="../core-dropdown/core-dropdown-base.html" rel="import">
  37
  38 </head><body><polymer-element name="core-menu-button" extends="core-dropdown-base" relative="" assetpath="">
  39 <template>
  40
  41   <style>
  42     :host {
  43       display: inline-block;
  44     }
  45
  46     :host([disabled]) {
  47       pointer-events: none;
  48       color: #a8a8a8;
  49     }
  50
  51     polyfill-next-selector { content: ':host([disabled]) *'; }
  52     :host([disabled]) ::content * {
  53       pointer-events: none;
  54     }
  55   </style>
  56
  57   <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
  58
  59   <content></content>
  60
  61 </template>
  62
  63 </polymer-element>
  64 <script src="core-menu-button-extracted.js"></script></body></html>