662 lines
18 KiB
HTML
662 lines
18 KiB
HTML
<!--
|
|
@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-icon/iron-icon.html">
|
|
<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
|
|
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.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="?active=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` with a `tabindex` of -1.
|
|
|
|
Example:
|
|
|
|
<pre><code>
|
|
<style is="custom-style">
|
|
.link {
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-center-center);
|
|
}
|
|
</style>
|
|
|
|
<paper-tabs selected="0">
|
|
<paper-tab link>
|
|
<a href="#link1" class="link" tabindex="-1">TAB ONE</a>
|
|
</paper-tab>
|
|
<paper-tab link>
|
|
<a href="#link2" class="link" tabindex="-1">TAB TWO</a>
|
|
</paper-tab>
|
|
<paper-tab link>
|
|
<a href="#link3" class="link" tabindex="-1">TAB THREE</a>
|
|
</paper-tab>
|
|
</paper-tabs>
|
|
</code></pre>
|
|
|
|
### 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-selection-bar` | Mixin applied to the selection bar | `{}`
|
|
`--paper-tabs` | Mixin applied to the tabs | `{}`
|
|
`--paper-tabs-content` | Mixin applied to the content container of tabs | `{}`
|
|
`--paper-tabs-container` | Mixin applied to the layout container of tabs | `{}`
|
|
|
|
@hero hero.svg
|
|
@demo demo/index.html
|
|
-->
|
|
|
|
<dom-module id="paper-tabs">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
@apply(--layout);
|
|
@apply(--layout-center);
|
|
|
|
height: 48px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
|
|
/* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
@apply(--paper-tabs);
|
|
}
|
|
|
|
:host-context([dir=rtl]) {
|
|
@apply(--layout-horizontal-reverse);
|
|
}
|
|
|
|
#tabsContainer {
|
|
position: relative;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
@apply(--layout-flex-auto);
|
|
@apply(--paper-tabs-container);
|
|
}
|
|
|
|
#tabsContent {
|
|
height: 100%;
|
|
-moz-flex-basis: auto;
|
|
-ms-flex-basis: auto;
|
|
flex-basis: auto;
|
|
@apply(--paper-tabs-content);
|
|
}
|
|
|
|
#tabsContent.scrollable {
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tabsContent:not(.scrollable),
|
|
#tabsContent.scrollable.fit-container {
|
|
@apply(--layout-horizontal);
|
|
}
|
|
|
|
#tabsContent.scrollable.fit-container {
|
|
min-width: 100%;
|
|
}
|
|
|
|
#tabsContent.scrollable.fit-container > ::content > * {
|
|
/* IE - prevent tabs from compressing when they should scroll. */
|
|
-ms-flex: 1 0 auto;
|
|
-webkit-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.not-visible {
|
|
opacity: 0;
|
|
cursor: default;
|
|
}
|
|
|
|
paper-icon-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 12px;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
#selectionBar {
|
|
position: absolute;
|
|
height: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 2px solid var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
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>
|
|
|
|
<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" on-track="_scroll" on-down="_down">
|
|
<div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]">
|
|
<div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]"
|
|
on-transitionend="_onBarTransitionEnd"></div>
|
|
<content select="*"></content>
|
|
</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>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'paper-tabs',
|
|
|
|
behaviors: [
|
|
Polymer.IronResizableBehavior,
|
|
Polymer.IronMenubarBehavior
|
|
],
|
|
|
|
properties: {
|
|
/**
|
|
* If true, ink ripple effect is disabled. When this property is changed,
|
|
* all descendant `<paper-tab>` elements have their `noink` property
|
|
* changed to the new value as well.
|
|
*/
|
|
noink: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: '_noinkChanged'
|
|
},
|
|
|
|
/**
|
|
* 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, tabs expand to fit their container. This currently only applies when
|
|
* scrollable is true.
|
|
*/
|
|
fitContainer: {
|
|
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
|
|
},
|
|
|
|
selectable: {
|
|
type: String,
|
|
value: 'paper-tab'
|
|
},
|
|
|
|
/**
|
|
* If true, tabs are automatically selected when focused using the
|
|
* keyboard.
|
|
*/
|
|
autoselect: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
|
|
/**
|
|
* The delay (in milliseconds) between when the user stops interacting
|
|
* with the tabs through the keyboard and when the focused item is
|
|
* automatically selected (if `autoselect` is true).
|
|
*/
|
|
autoselectDelay: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
|
|
_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': '_onTabSizingChanged',
|
|
'iron-items-changed': '_onTabSizingChanged',
|
|
'iron-select': '_onIronSelect',
|
|
'iron-deselect': '_onIronDeselect'
|
|
},
|
|
|
|
keyBindings: {
|
|
'left:keyup right:keyup': '_onArrowKeyup'
|
|
},
|
|
|
|
created: function() {
|
|
this._holdJob = null;
|
|
this._pendingActivationItem = undefined;
|
|
this._pendingActivationTimeout = undefined;
|
|
this._bindDelayedActivationHandler = this._delayedActivationHandler.bind(this);
|
|
this.addEventListener('blur', this._onBlurCapture.bind(this), true);
|
|
},
|
|
|
|
ready: function() {
|
|
this.setScrollDirection('y', this.$.tabsContainer);
|
|
},
|
|
|
|
detached: function() {
|
|
this._cancelPendingActivation();
|
|
},
|
|
|
|
_noinkChanged: function(noink) {
|
|
var childTabs = Polymer.dom(this).querySelectorAll('paper-tab');
|
|
childTabs.forEach(noink ? this._setNoinkAttribute : this._removeNoinkAttribute);
|
|
},
|
|
|
|
_setNoinkAttribute: function(element) {
|
|
element.setAttribute('noink', '');
|
|
},
|
|
|
|
_removeNoinkAttribute: function(element) {
|
|
element.removeAttribute('noink');
|
|
},
|
|
|
|
_computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) {
|
|
if (!scrollable || hideScrollButtons) {
|
|
return 'hidden';
|
|
}
|
|
|
|
if (hideThisButton) {
|
|
return 'not-visible';
|
|
}
|
|
|
|
return '';
|
|
},
|
|
|
|
_computeTabsContentClass: function(scrollable, fitContainer) {
|
|
return scrollable ? 'scrollable' + (fitContainer ? ' fit-container' : '') : ' fit-container';
|
|
},
|
|
|
|
_computeSelectionBarClass: function(noBar, alignBottom) {
|
|
if (noBar) {
|
|
return 'hidden';
|
|
} else if (alignBottom) {
|
|
return 'align-bottom';
|
|
}
|
|
|
|
return '';
|
|
},
|
|
|
|
// TODO(cdata): Add `track` response back in when gesture lands.
|
|
|
|
_onTabSizingChanged: function() {
|
|
this.debounce('_onTabSizingChanged', 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);
|
|
this._previousTab = null;
|
|
// See polymer/polymer#1305
|
|
}, 1);
|
|
},
|
|
|
|
_activateHandler: function() {
|
|
// Cancel item activations scheduled by keyboard events when any other
|
|
// action causes an item to be activated (e.g. clicks).
|
|
this._cancelPendingActivation();
|
|
|
|
Polymer.IronMenuBehaviorImpl._activateHandler.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Activates an item after a delay (in milliseconds).
|
|
*/
|
|
_scheduleActivation: function(item, delay) {
|
|
this._pendingActivationItem = item;
|
|
this._pendingActivationTimeout = this.async(
|
|
this._bindDelayedActivationHandler, delay);
|
|
},
|
|
|
|
/**
|
|
* Activates the last item given to `_scheduleActivation`.
|
|
*/
|
|
_delayedActivationHandler: function() {
|
|
var item = this._pendingActivationItem;
|
|
this._pendingActivationItem = undefined;
|
|
this._pendingActivationTimeout = undefined;
|
|
item.fire(this.activateEvent, null, {
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Cancels a previously scheduled item activation made with
|
|
* `_scheduleActivation`.
|
|
*/
|
|
_cancelPendingActivation: function() {
|
|
if (this._pendingActivationTimeout !== undefined) {
|
|
this.cancelAsync(this._pendingActivationTimeout);
|
|
this._pendingActivationItem = undefined;
|
|
this._pendingActivationTimeout = undefined;
|
|
}
|
|
},
|
|
|
|
_onArrowKeyup: function(event) {
|
|
if (this.autoselect) {
|
|
this._scheduleActivation(this.focusedItem, this.autoselectDelay);
|
|
}
|
|
},
|
|
|
|
_onBlurCapture: function(event) {
|
|
// Cancel a scheduled item activation (if any) when that item is
|
|
// blurred.
|
|
if (event.target === this._pendingActivationItem) {
|
|
this._cancelPendingActivation();
|
|
}
|
|
},
|
|
|
|
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) {
|
|
// Remove the bar without animation.
|
|
this.$.selectionBar.classList.remove('expand');
|
|
this.$.selectionBar.classList.remove('contract');
|
|
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 the bar without animation.
|
|
this.$.selectionBar.classList.remove('expand');
|
|
this.$.selectionBar.classList.remove('contract');
|
|
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');
|
|
|
|
var moveRight = oldIndex < index;
|
|
var isRTL = this._isRTL;
|
|
if (isRTL) {
|
|
moveRight = !moveRight;
|
|
}
|
|
|
|
if (moveRight) {
|
|
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(
|
|
'translateX(' + left + '%) 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>
|
|
</dom-module>
|