src/third_party/polymer/components/paper-menu-button/paper-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 A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.
  11
  12 Example:
  13
  14     <paper-menu-button icon="menu">
  15       <div>Menu Item 1</div>
  16       <div>Menu Item 2</div>
  17       <div>Menu Item 3</div>
  18     </paper-menu-button>
  19
  20  @group Paper Elements
  21  @element paper-menu-button
  22  @extends paper-focusable
  23 -->
  24 <link href="../polymer/polymer.html" rel="import">
  25 <link href="../core-icon/core-icon.html" rel="import">
  26 <link href="../core-menu/core-menu.html" rel="import">
  27 <link href="../paper-focusable/paper-focusable.html" rel="import">
  28 <link href="../paper-shadow/paper-shadow.html" rel="import">
  29 <link href="paper-menu-button-overlay.html" rel="import">
  30 <link href="paper-menu-button-transition.html" rel="import">
  31
  32 <polymer-element name="paper-menu-button-overlay-container" noscript>
  33 <template>
  34   <content></content>
  35 </template>
  36 </polymer-element>
  37
  38 <polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
  39   <template>
  40     <link rel="stylesheet" href="paper-menu-button.css">
  41     <paper-menu-button-overlay target="{{$.overlay}}" relatedTarget="{{}}" halign="{{halign}}" valign="{{valign}}" opened="{{opened}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}"></paper-menu-button-overlay>
  42     <paper-menu-button-overlay-container id="overlay">
  43       <paper-shadow target="{{$.overlayBg}}" z="0" hasPosition></paper-shadow>
  44       <div class="paper-menu-button-overlay-ink"></div>
  45       <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
  46       <core-menu id="menu">
  47         <content></content>
  48       </core-menu>
  49     </paper-menu-button-overlay-container>
  50     <core-icon src="{{src}}" icon="{{icon}}"></core-icon>
  51   </template>
  52   <script>
  53     Polymer('paper-menu-button', {
  54
  55       publish: {
  56
  57         /**
  58          * If true, this menu is currently visible.
  59          *
  60          * @attribute opened
  61          * @type boolean
  62          * @default false
  63          */
  64         opened: { value: false, reflect: true },
  65
  66         /**
  67          * The horizontal alignment of the pulldown menu relative to the button.
  68          *
  69          * @attribute halign
  70          * @type 'left' | 'right'
  71          * @default 'left'
  72          */
  73         halign: { value: 'left', reflect: true },
  74
  75         /**
  76          * The vertical alignment of the pulldown menu relative to the button.
  77          *
  78          * @attribute valign
  79          * @type 'bottom' | 'top'
  80          * @default 'top'
  81          */
  82         valign: {value: 'top', reflect: true}
  83       },
  84
  85       /**
  86        * The URL of an image for the icon.  Should not use `icon` property
  87        * if you are using this property.
  88        *
  89        * @attribute src
  90        * @type string
  91        * @default ''
  92        */
  93       src: '',
  94
  95       /**
  96        * Specifies the icon name or index in the set of icons available in
  97        * the icon set.  Should not use `src` property if you are using this
  98        * property.
  99        *
 100        * @attribute icon
 101        * @type string
 102        * @default ''
 103        */
 104       icon: '',
 105
 106       slow: false,
 107
 108       tapAction: function() {
 109         if (this.disabled) {
 110           return;
 111         }
 112
 113         this.super();
 114         this.toggle();
 115       },
 116
 117       /**
 118        * Toggle the opened state of the menu.
 119        *
 120        * @method toggle
 121        */
 122       toggle: function() {
 123         this.opened = !this.opened;
 124       }
 125
 126     });
 127   </script>
 128 </polymer-element>