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 --> 10 11 <link rel="import" href="../iron-dropdown.html"> 12 <link rel="import" href="../../neon-animation/neon-animations.html"> 13 <link rel="import" href="grow-height-animation.html"> 14 15 <dom-module id="x-select"> 16 <style> 17 :host { 18 display: inline-block; 19 margin: 1em; 20 } 21 </style> 22 <template> 23 <div on-tap="open"> 24 <content select=".dropdown-trigger"></content> 25 </div> 26 <iron-dropdown id="dropdown" 27 vertical-align="[[verticalAlign]]" 28 horizontal-align="[[horizontalAlign]]" 29 disabled="[[disabled]]" 30 open-animation-config="[[openAnimationConfig]]" 31 close-animation-config="[[closeAnimationConfig]]"> 32 <content select=".dropdown-content"></content> 33 </iron-dropdown> 34 </template> 35 <script> 36 Polymer({ 37 is: 'x-select', 38 39 properties: { 40 verticalAlign: String, 41 horizontalAlign: String, 42 disabled: Boolean, 43 openAnimationConfig: { 44 type: Array, 45 value: function() { 46 return [{ 47 name: 'fade-in-animation', 48 timing: { 49 delay: 150, 50 duration: 50 51 } 52 }, { 53 name: 'expand-animation', 54 timing: { 55 delay: 150, 56 duration: 200 57 } 58 }]; 59 } 60 }, 61 62 closeAnimationConfig: { 63 type: Array, 64 value: function() { 65 return [{ 66 name: 'fade-out-animation', 67 timing: { 68 duration: 200 69 } 70 }]; 71 } 72 } 73 }, 74 75 open: function() { 76 this.$.dropdown.open(); 77 } 78 }); 79 </script> 80 </dom-module> 81
