Home | History | Annotate | Download | only in core-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 /**
     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" assetpath="">
     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   
     75 </polymer-element>
     76 <script src="core-menu-button-extracted.js"></script>