<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> <link rel="import" href="../iron-icon/iron-icon.html"> <link rel="import" href="../paper-icon-button/paper-icon-button.html"> <link rel="import" href="../paper-styles/color.html"> <link rel="import" href="paper-tabs-icons.html"> <link rel="import" href="paper-tab.html"> <!-- Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) `paper-tabs` makes it easy to explore and switch between different views or functional aspects of an app, or to browse categorized data sets. Use `selected` property to get or set the selected tab. Example: <paper-tabs selected="0"> <paper-tab>TAB 1</paper-tab> <paper-tab>TAB 2</paper-tab> <paper-tab>TAB 3</paper-tab> </paper-tabs> See <a href="#paper-tab">paper-tab</a> for more information about `paper-tab`. A common usage for `paper-tabs` is to use it along with `iron-pages` to switch between different views. <paper-tabs selected="{{selected}}"> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> <iron-pages selected="{{selected}}"> <div>Page 1</div> <div>Page 2</div> <div>Page 3</div> </iron-pages> To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` element in `paper-tab`. Example: <paper-tabs selected="0"> <paper-tab link> <a href="#link1" class="horizontal center-center layout">TAB ONE</a> </paper-tab> <paper-tab link> <a href="#link2" class="horizontal center-center layout">TAB TWO</a> </paper-tab> <paper-tab link> <a href="#link3" class="horizontal center-center layout">TAB THREE</a> </paper-tab> </paper-tabs> ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100` `--paper-tabs` | Mixin applied to the tabs | `{}` @hero hero.svg @demo demo/index.html --> <dom-module id="paper-tabs"> <style> :host { @apply(--layout); @apply(--layout-center); height: 48px; font-size: 14px; font-weight: 500; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); @apply(--paper-tabs); } #tabsContainer { position: relative; height: 100%; white-space: nowrap; overflow: hidden; } #tabsContent { height: 100%; } #tabsContent.scrollable { position: absolute; white-space: nowrap; } .hidden { display: none; } .not-visible { opacity: 0; cursor: default; } paper-icon-button { width: 24px; padding: 16px; } #selectionBar { position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(0); transform: scale(0); transition: -webkit-transform; transition: transform; @apply(--paper-tabs-selection-bar); } #selectionBar.align-bottom { top: 0; bottom: auto; } #selectionBar.expand { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); } #selectionBar.contract { transition-duration: 0.18s; transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } #tabsContent > ::content > *:not(#selectionBar) { height: 100%; } </style> <template> <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> <div id="tabsContainer" class="flex" on-track="_scroll" on-down="_down"> <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"> <content select="*"></content> <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div> </div> </div> <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> </template> </dom-module> <script> Polymer({ is: 'paper-tabs', behaviors: [ Polymer.IronResizableBehavior, Polymer.IronMenubarBehavior ], properties: { /** * If true, ink ripple effect is disabled. */ noink: { type: Boolean, value: false }, /** * If true, the bottom bar to indicate the selected tab will not be shown. */ noBar: { type: Boolean, value: false }, /** * If true, the slide effect for the bottom bar is disabled. */ noSlide: { type: Boolean, value: false }, /** * If true, tabs are scrollable and the tab width is based on the label width. */ scrollable: { type: Boolean, value: false }, /** * If true, dragging on the tabs to scroll is disabled. */ disableDrag: { type: Boolean, value: false }, /** * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs. */ hideScrollButtons: { type: Boolean, value: false }, /** * If true, the tabs are aligned to bottom (the selection bar appears at the top). */ alignBottom: { type: Boolean, value: false }, /** * Gets or sets the selected element. The default is to use the index of the item. */ selected: { type: String, notify: true }, selectable: { type: String, value: 'paper-tab' }, _step: { type: Number, value: 10 }, _holdDelay: { type: Number, value: 1 }, _leftHidden: { type: Boolean, value: false }, _rightHidden: { type: Boolean, value: false }, _previousTab: { type: Object } }, hostAttributes: { role: 'tablist' }, listeners: { 'iron-resize': '_onResize', 'iron-select': '_onIronSelect', 'iron-deselect': '_onIronDeselect' }, ready: function() { this.setScrollDirection('y', this.$.tabsContainer); }, _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) { if (!scrollable || hideScrollButtons) { return 'hidden'; } if (hideThisButton) { return 'not-visible'; } return ''; }, _computeTabsContentClass: function(scrollable) { return scrollable ? 'scrollable' : 'horizontal layout'; }, _computeSelectionBarClass: function(noBar, alignBottom) { if (noBar) { return 'hidden'; } else if (alignBottom) { return 'align-bottom'; } }, // TODO(cdata): Add `track` response back in when gesture lands. _onResize: function() { this.debounce('_onResize', function() { this._scroll(); this._tabChanged(this.selectedItem); }, 10); }, _onIronSelect: function(event) { this._tabChanged(event.detail.item, this._previousTab); this._previousTab = event.detail.item; this.cancelDebouncer('tab-changed'); }, _onIronDeselect: function(event) { this.debounce('tab-changed', function() { this._tabChanged(null, this._previousTab); // See polymer/polymer#1305 }, 1); }, get _tabContainerScrollSize () { return Math.max( 0, this.$.tabsContainer.scrollWidth - this.$.tabsContainer.offsetWidth ); }, _scroll: function(e, detail) { if (!this.scrollable) { return; } var ddx = (detail && -detail.ddx) || 0; this._affectScroll(ddx); }, _down: function(e) { // go one beat async to defeat IronMenuBehavior // autorefocus-on-no-selection timeout this.async(function() { if (this._defaultFocusAsync) { this.cancelAsync(this._defaultFocusAsync); this._defaultFocusAsync = null; } }, 1); }, _affectScroll: function(dx) { this.$.tabsContainer.scrollLeft += dx; var scrollLeft = this.$.tabsContainer.scrollLeft; this._leftHidden = scrollLeft === 0; this._rightHidden = scrollLeft === this._tabContainerScrollSize; }, _onLeftScrollButtonDown: function() { this._scrollToLeft(); this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay); }, _onRightScrollButtonDown: function() { this._scrollToRight(); this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay); }, _onScrollButtonUp: function() { clearInterval(this._holdJob); this._holdJob = null; }, _scrollToLeft: function() { this._affectScroll(-this._step); }, _scrollToRight: function() { this._affectScroll(this._step); }, _tabChanged: function(tab, old) { if (!tab) { this._positionBar(0, 0); return; } var r = this.$.tabsContent.getBoundingClientRect(); var w = r.width; var tabRect = tab.getBoundingClientRect(); var tabOffsetLeft = tabRect.left - r.left; this._pos = { width: this._calcPercent(tabRect.width, w), left: this._calcPercent(tabOffsetLeft, w) }; if (this.noSlide || old == null) { // position bar directly without animation this._positionBar(this._pos.width, this._pos.left); return; } var oldRect = old.getBoundingClientRect(); var oldIndex = this.items.indexOf(old); var index = this.items.indexOf(tab); var m = 5; // bar animation: expand this.$.selectionBar.classList.add('expand'); if (oldIndex < index) { this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m, this._left); } else { this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m, this._calcPercent(tabOffsetLeft, w) + m); } if (this.scrollable) { this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft); } }, _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) { var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft; if (l < 0) { this.$.tabsContainer.scrollLeft += l; } else { l += (tabWidth - this.$.tabsContainer.offsetWidth); if (l > 0) { this.$.tabsContainer.scrollLeft += l; } } }, _calcPercent: function(w, w0) { return 100 * w / w0; }, _positionBar: function(width, left) { width = width || 0; left = left || 0; this._width = width; this._left = left; this.transform( 'translate3d(' + left + '%, 0, 0) scaleX(' + (width / 100) + ')', this.$.selectionBar); }, _onBarTransitionEnd: function(e) { var cl = this.$.selectionBar.classList; // bar animation: expand -> contract if (cl.contains('expand')) { cl.remove('expand'); cl.add('contract'); this._positionBar(this._pos.width, this._pos.left); // bar animation done } else if (cl.contains('contract')) { cl.remove('contract'); } } }); </script>