third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-dropdown/iron-dropdown.html">
  11 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  12 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  13 <link rel="import" href="../paper-material/paper-material.html">
  14 <link rel="import" href="../paper-styles/default-theme.html">
  15 <link rel="import" href="../neon-animation/animations/fade-in-animation.html">
  16 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">
  17 <link rel="import" href="paper-menu-button-animations.html">
  18
  19 <!--
  20 `paper-menu-button` allows one to compose a designated "trigger" element with
  21 another element that represents "content", to create a dropdown menu that
  22 displays the "content" when the "trigger" is clicked.
  23
  24 The child element with the class `dropdown-trigger` will be used as the
  25 "trigger" element. The child element with the class `dropdown-content` will be
  26 used as the "content" element.
  27
  28 The `paper-menu-button` is sensitive to its content's `iron-select` events. If
  29 the "content" element triggers an `iron-select` event, the `paper-menu-button`
  30 will close automatically.
  31
  32 Example:
  33
  34     <paper-menu-button>
  35       <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  36       <paper-menu class="dropdown-content">
  37         <paper-item>Share</paper-item>
  38         <paper-item>Settings</paper-item>
  39         <paper-item>Help</paper-item>
  40       </paper-menu>
  41     </paper-menu-button>
  42
  43 ### Styling
  44
  45 The following custom properties and mixins are also available for styling:
  46
  47 Custom property | Description | Default
  48 ----------------|-------------|----------
  49 `--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `#fff`
  50 `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}`
  51 `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}`
  52 `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}`
  53
  54
  55 @hero hero.svg
  56 @demo demo/index.html
  57 -->
  58
  59 </head><body><dom-module id="paper-menu-button">
  60   <style>
  61     :host {
  62       display: inline-block;
  63       position: relative;
  64       padding: 8px;
  65       outline: none;
  66
  67       @apply(--paper-menu-button);
  68     }
  69
  70     :host([disabled]) {
  71       cursor: auto;
  72       color: var(--disabled-text-color);
  73
  74       @apply(--paper-menu-button-disabled);
  75     }
  76
  77     :host([vertical-align="top"]) paper-material {
  78       margin-bottom: 20px;
  79       margin-top: -10px;
  80       top: 10px;
  81     }
  82
  83     :host([vertical-align="bottom"]) paper-material {
  84       bottom: 10px;
  85       margin-bottom: -10px;
  86       margin-top: 20px;
  87     }
  88
  89     paper-material {
  90       border-radius: 2px;
  91       background-color: var(--paper-menu-button-dropdown-background, --primary-background-color);
  92
  93       @apply(--paper-menu-button-dropdown);
  94     }
  95   </style>
  96   <template>
  97     <div id="trigger" on-tap="open">
  98       <content select=".dropdown-trigger"></content>
  99     </div>
 100     <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]">
 101       <paper-material class="dropdown-content">
 102         <content select=".dropdown-content"></content>
 103       </paper-material>
 104     </iron-dropdown>
 105   </template>
 106 </dom-module>
 107 <script src="paper-menu-button-extracted.js"></script></body></html>