src/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  * @module Polymer Core Elements
  12  */
  13 /**
  14  * core-menu-button is a core-icon-button with a drop down menu
  15  * that allows the user to select an option. The drop down menu is styled with
  16  * an arrow pointing to the button, and can be positioned to the top or the
  17  * bottom of the button with the valign property. The valign property aligns
  18  * the menu to the left or right edge of the button.
  19  *
  20  * Example:
  21  *
  22  *     <core-menu-button selected="0">
  23  *       <core-item icon="settings" label="Settings"></core-item>
  24  *       <core-item icon="dialog" label="Dialog"></core-item>
  25  *       <core-item icon="search" label="Search"></core-item>
  26  *     </core-menu-button>
  27  *
  28  * @class core-menu-button
  29  */
  30 -->
  31 <link href="../polymer/polymer.html" rel="import">
  32 <link href="../core-icon-button/core-icon-button.html" rel="import">
  33 <link href="../core-menu/core-menu.html" rel="import">
  34 <link href="../core-overlay/core-overlay.html" rel="import">
  35
  36 <polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
  37   <template>
  38     <link rel="stylesheet" href="core-menu-button.css">
  39     <core-overlay target="{{$.overlay}}" opened="{{opened}}" layered?="{{!inlineMenu}}"></core-overlay>
  40     <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
  41     <div id="overlay" halign="{{halign}}" valign="{{valign}}">
  42       <style>
  43         #overlay {
  44           position: absolute;
  45           left: 0px;
  46           top: 40px;
  47           padding: 8px;
  48           background: #fff;
  49           border: 1px solid #ccc;
  50           border-radius: 3px;
  51           /* overlay styling must be complete */
  52           font-size: 1rem;
  53         }
  54
  55         core-menu {
  56           margin: 0;
  57         }
  58
  59         #overlay[halign=right] {
  60           left: auto;
  61           right: 0px;
  62         }
  63
  64         #overlay[valign=top] {
  65           top: auto;
  66           bottom: 40px;
  67         }
  68       </style>
  69       <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}" on-core-select="{{closeAction}}">
  70         <content select="*"></content>
  71       </core-menu>
  72     </div>
  73   </template>
  74   <script>
  75     Polymer('core-menu-button', {
  76       /**
  77        * The icon to display.
  78        * @attribute icon
  79        * @type string
  80        */
  81       icon: 'dots',
  82       src: '',
  83       /**
  84        * The index of the selected menu item.
  85        * @attribute selected
  86        * @type number
  87        */
  88       selected: '',
  89       /**
  90        * Set to true to open the menu.
  91        * @attribute opened
  92        * @type boolean
  93        */
  94       opened: false,
  95       /**
  96        * Set to true to cause the menu popup to be displayed inline rather
  97        * than in its own layer.
  98        * @attribute inlineMenu
  99        * @type boolean
 100        */
 101       inlineMenu: false,
 102       /**
 103        * Horizontally align the overlay with the button. Accepted values are
 104        * ["left", "center", "right"].
 105        * @attribute halign
 106        * @type string
 107        */
 108       halign: 'center',
 109       /**
 110        * Display the overlay on top or below the button. Accepted values are
 111        * ["top", "bottom"].
 112        * @attribute valign
 113        * @type string
 114        */
 115       valign: 'bottom',
 116       multi: false,
 117       closeAction: function() {
 118         this.opened = false;
 119       },
 120       /**
 121        * Toggle the opened state of the dropdown.
 122        * @method toggle
 123        */
 124       toggle: function() {
 125         this.opened = !this.opened;
 126       },
 127       /**
 128        * The selected menu item.
 129        * @property selection
 130        * @type Node
 131        */
 132       get selection() {
 133         return this.$.menu.selection;
 134       }
 135     });
 136   </script>
 137 </polymer-element>