Home | History | Annotate | Download | only in paper-menu-button 
      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>
    129