OLD | NEW |
(Empty) | |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 9 --> |
| 10 |
| 11 <link rel="import" href="../polymer/polymer.html"> |
| 12 <link rel="import" href="../iron-dropdown/iron-dropdown.html"> |
| 13 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| 14 <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
| 15 <link rel="import" href="../paper-material/paper-material.html"> |
| 16 <link rel="import" href="../paper-styles/default-theme.html"> |
| 17 <link rel="import" href="../neon-animation/animations/fade-in-animation.html"> |
| 18 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> |
| 19 <link rel="import" href="paper-menu-button-animations.html"> |
| 20 |
| 21 <!-- |
| 22 `paper-menu-button` allows one to compose a designated "trigger" element with |
| 23 another element that represents "content", to create a dropdown menu that |
| 24 displays the "content" when the "trigger" is clicked. |
| 25 |
| 26 The child element with the class `dropdown-trigger` will be used as the |
| 27 "trigger" element. The child element with the class `dropdown-content` will be |
| 28 used as the "content" element. |
| 29 |
| 30 The `paper-menu-button` is sensitive to its content's `iron-select` events. If |
| 31 the "content" element triggers an `iron-select` event, the `paper-menu-button` |
| 32 will close automatically. |
| 33 |
| 34 Example: |
| 35 |
| 36 <paper-menu-button> |
| 37 <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-butto
n> |
| 38 <paper-menu class="dropdown-content"> |
| 39 <paper-item>Share</paper-item> |
| 40 <paper-item>Settings</paper-item> |
| 41 <paper-item>Help</paper-item> |
| 42 </paper-menu> |
| 43 </paper-menu-button> |
| 44 |
| 45 ### Styling |
| 46 |
| 47 The following custom properties and mixins are also available for styling: |
| 48 |
| 49 Custom property | Description | Default |
| 50 ----------------|-------------|---------- |
| 51 `--paper-menu-button-dropdown-background` | Background color of the paper-menu-b
utton dropdown | `#fff` |
| 52 `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}` |
| 53 `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when dis
abled | `{}` |
| 54 `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown
| `{}` |
| 55 |
| 56 |
| 57 @hero hero.svg |
| 58 @demo demo/index.html |
| 59 --> |
| 60 |
| 61 <dom-module id="paper-menu-button"> |
| 62 <style> |
| 63 :host { |
| 64 display: inline-block; |
| 65 position: relative; |
| 66 padding: 8px; |
| 67 outline: none; |
| 68 |
| 69 @apply(--paper-menu-button); |
| 70 } |
| 71 |
| 72 :host([disabled]) { |
| 73 cursor: auto; |
| 74 color: var(--disabled-text-color); |
| 75 |
| 76 @apply(--paper-menu-button-disabled); |
| 77 } |
| 78 |
| 79 :host([vertical-align="top"]) paper-material { |
| 80 margin-bottom: 20px; |
| 81 margin-top: -10px; |
| 82 top: 10px; |
| 83 } |
| 84 |
| 85 :host([vertical-align="bottom"]) paper-material { |
| 86 bottom: 10px; |
| 87 margin-bottom: -10px; |
| 88 margin-top: 20px; |
| 89 } |
| 90 |
| 91 paper-material { |
| 92 border-radius: 2px; |
| 93 background-color: var(--paper-menu-button-dropdown-background, --primary-b
ackground-color); |
| 94 |
| 95 @apply(--paper-menu-button-dropdown); |
| 96 } |
| 97 </style> |
| 98 <template> |
| 99 <div id="trigger" on-tap="open"> |
| 100 <content select=".dropdown-trigger"></content> |
| 101 </div> |
| 102 <iron-dropdown |
| 103 id="dropdown" |
| 104 opened="{{opened}}" |
| 105 horizontal-align="[[horizontalAlign]]" |
| 106 vertical-align="[[verticalAlign]]" |
| 107 open-animation-config="[[openAnimationConfig]]" |
| 108 close-animation-config="[[closeAnimationConfig]]" |
| 109 no-animations="[[noAnimations]]"> |
| 110 <paper-material class="dropdown-content"> |
| 111 <content select=".dropdown-content"></content> |
| 112 </paper-material> |
| 113 </iron-dropdown> |
| 114 </template> |
| 115 </dom-module> |
| 116 <script> |
| 117 (function() { |
| 118 'use strict'; |
| 119 |
| 120 var PaperMenuButton = Polymer({ |
| 121 |
| 122 is: 'paper-menu-button', |
| 123 |
| 124 behaviors: [ |
| 125 Polymer.IronA11yKeysBehavior, |
| 126 Polymer.IronControlState |
| 127 ], |
| 128 |
| 129 properties: { |
| 130 |
| 131 /** |
| 132 * True if the content is currently displayed. |
| 133 */ |
| 134 opened: { |
| 135 type: Boolean, |
| 136 value: false, |
| 137 notify: true |
| 138 }, |
| 139 |
| 140 /** |
| 141 * The orientation against which to align the menu dropdown |
| 142 * horizontally relative to the dropdown trigger. |
| 143 */ |
| 144 horizontalAlign: { |
| 145 type: String, |
| 146 value: 'left', |
| 147 reflectToAttribute: true |
| 148 }, |
| 149 |
| 150 /** |
| 151 * The orientation against which to align the menu dropdown |
| 152 * vertically relative to the dropdown trigger. |
| 153 */ |
| 154 verticalAlign: { |
| 155 type: String, |
| 156 value: 'top', |
| 157 reflectToAttribute: true |
| 158 }, |
| 159 |
| 160 /** |
| 161 * Set to true to disable animations when opening and closing the |
| 162 * dropdown. |
| 163 */ |
| 164 noAnimations: { |
| 165 type: Boolean, |
| 166 value: false |
| 167 }, |
| 168 |
| 169 /** |
| 170 * An animation config. If provided, this will be used to animate the |
| 171 * opening of the dropdown. |
| 172 */ |
| 173 openAnimationConfig: { |
| 174 type: Object, |
| 175 value: function() { |
| 176 return [{ |
| 177 name: 'fade-in-animation', |
| 178 timing: { |
| 179 delay: 100, |
| 180 duration: 200 |
| 181 } |
| 182 }, { |
| 183 name: 'paper-menu-grow-width-animation', |
| 184 timing: { |
| 185 delay: 100, |
| 186 duration: 150, |
| 187 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER |
| 188 } |
| 189 }, { |
| 190 name: 'paper-menu-grow-height-animation', |
| 191 timing: { |
| 192 delay: 100, |
| 193 duration: 275, |
| 194 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER |
| 195 } |
| 196 }]; |
| 197 } |
| 198 }, |
| 199 |
| 200 /** |
| 201 * An animation config. If provided, this will be used to animate the |
| 202 * closing of the dropdown. |
| 203 */ |
| 204 closeAnimationConfig: { |
| 205 type: Object, |
| 206 value: function() { |
| 207 return [{ |
| 208 name: 'fade-out-animation', |
| 209 timing: { |
| 210 duration: 150 |
| 211 } |
| 212 }, { |
| 213 name: 'paper-menu-shrink-width-animation', |
| 214 timing: { |
| 215 delay: 100, |
| 216 duration: 50, |
| 217 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER |
| 218 } |
| 219 }, { |
| 220 name: 'paper-menu-shrink-height-animation', |
| 221 timing: { |
| 222 duration: 200, |
| 223 easing: 'ease-in' |
| 224 } |
| 225 }]; |
| 226 } |
| 227 } |
| 228 }, |
| 229 |
| 230 hostAttributes: { |
| 231 role: 'group', |
| 232 'aria-haspopup': 'true' |
| 233 }, |
| 234 |
| 235 listeners: { |
| 236 'iron-activate': '_onIronActivate' |
| 237 }, |
| 238 |
| 239 /** |
| 240 * Make the dropdown content appear as an overlay positioned relative |
| 241 * to the dropdown trigger. |
| 242 */ |
| 243 open: function() { |
| 244 this.fire('paper-open'); |
| 245 this.$.dropdown.open(); |
| 246 }, |
| 247 |
| 248 /** |
| 249 * Hide the dropdown content. |
| 250 */ |
| 251 close: function() { |
| 252 this.fire('paper-close'); |
| 253 this.$.dropdown.close(); |
| 254 }, |
| 255 |
| 256 _onIronActivate: function(event) { |
| 257 this.close(); |
| 258 } |
| 259 }); |
| 260 |
| 261 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)'; |
| 262 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; |
| 263 |
| 264 Polymer.PaperMenuButton = PaperMenuButton; |
| 265 })(); |
| 266 </script> |
| 267 |
OLD | NEW |