third_party/polymer/components/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
  11 `core-menu-button` works together with a button and `core-dropdown` to implement
  12 an button that displays a drop-down when tapped on.
  13
  14 The child element with the class `dropdown` will be used as the drop-down
  15 menu. It should be a `core-dropdown` or other overlay element.
  16
  17 Example:
  18
  19     <core-menu-button>
  20         <core-icon-button icon="menu"></core-icon-button>
  21         <core-dropdown class="dropdown" layered>
  22             <core-menu>
  23                 <core-item>Share</core-item>
  24                 <core-item>Settings</core-item>
  25                 <core-item>Help</core-item>
  26             </core-menu>
  27         </core-dropdown>
  28     </core-menu-button>
  29
  30 @module Polymer Core Elements
  31 @element core-menu-button
  32 @extends core-dropdown-base
  33 @status beta
  34 @homepage github.io
  35 -->
  36
  37 <link href="../polymer/polymer.html" rel="import">
  38 <link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
  39 <link href="../core-dropdown/core-dropdown-base.html" rel="import">
  40
  41 <polymer-element name="core-menu-button" extends="core-dropdown-base" relative>
  42 <template>
  43
  44   <style>
  45     :host {
  46       display: inline-block;
  47     }
  48
  49     :host([disabled]) {
  50       pointer-events: none;
  51       color: #a8a8a8;
  52     }
  53
  54     polyfill-next-selector { content: ':host([disabled]) *'; }
  55     :host([disabled]) ::content * {
  56       pointer-events: none;
  57     }
  58   </style>
  59
  60   <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
  61
  62   <content></content>
  63
  64 </template>
  65 <script>
  66
  67   Polymer({
  68
  69     overlayListeners: {
  70       'core-overlay-open': 'openAction',
  71       'core-activate': 'activateAction'
  72     },
  73
  74     activateAction: function() {
  75       this.opened = false;
  76     }
  77
  78   });
  79
  80 </script>
  81 </polymer-element>