src/third_party/polymer/components-chromium/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" 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>