1 2 3 Polymer('paper-tabs', { 4 5 /** 6 * If true, ink effect is disabled. 7 * 8 * @attribute noink 9 * @type boolean 10 * @default false 11 */ 12 noink: false, 13 14 /** 15 * If true, the bottom bar to indicate the selected tab will not be shown. 16 * 17 * @attribute nobar 18 * @type boolean 19 * @default false 20 */ 21 nobar: false, 22 23 activateEvent: 'down', 24 25 nostretch: false, 26 27 selectedIndexChanged: function(old) { 28 var s = this.$.selectionBar.style; 29 30 if (!this.selectedItem) { 31 s.width = 0; 32 s.left = 0; 33 return; 34 } 35 36 var w = 100 / this.items.length; 37 38 if (this.nostretch || old === null || old === -1) { 39 s.width = w + '%'; 40 s.left = this.selectedIndex * w + '%'; 41 return; 42 } 43 44 var m = 5; 45 this.$.selectionBar.classList.add('expand'); 46 if (old < this.selectedIndex) { 47 s.width = w + w * (this.selectedIndex - old) - m + '%'; 48 } else { 49 s.width = w + w * (old - this.selectedIndex) - m + '%'; 50 s.left = this.selectedIndex * w + m + '%'; 51 } 52 }, 53 54 barTransitionEnd: function() { 55 var cl = this.$.selectionBar.classList; 56 if (cl.contains('expand')) { 57 cl.remove('expand'); 58 cl.add('contract'); 59 var s = this.$.selectionBar.style; 60 var w = 100 / this.items.length; 61 s.width = w + '%'; 62 s.left = this.selectedIndex * w + '%'; 63 } else if (cl.contains('contract')) { 64 cl.remove('contract'); 65 } 66 } 67 68 }); 69 70