176 lines
4.2 KiB
HTML
176 lines
4.2 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-behaviors/iron-button-state.html">
|
|
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
|
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
|
<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
|
|
|
|
<!--
|
|
`paper-tab` is styled to look like a tab. It should be used in conjunction with
|
|
`paper-tabs`.
|
|
|
|
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>
|
|
|
|
### Styling
|
|
|
|
The following custom properties and mixins are available for styling:
|
|
|
|
Custom property | Description | Default
|
|
----------------|-------------|----------
|
|
`--paper-tab-ink` | Ink color | `--paper-yellow-a100`
|
|
`--paper-tab` | Mixin applied to the tab | `{}`
|
|
`--paper-tab-content` | Mixin applied to the tab content | `{}`
|
|
`--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}`
|
|
|
|
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
|
|
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
|
|
|
|
-->
|
|
|
|
<dom-module id="paper-tab">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
@apply(--layout-inline);
|
|
@apply(--layout-center);
|
|
@apply(--layout-center-justified);
|
|
@apply(--layout-flex-auto);
|
|
|
|
position: relative;
|
|
padding: 0 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
|
|
@apply(--paper-font-common-base);
|
|
@apply(--paper-tab);
|
|
}
|
|
|
|
:host(:focus) {
|
|
outline: none;
|
|
}
|
|
|
|
:host([link]) {
|
|
padding: 0;
|
|
}
|
|
|
|
.tab-content {
|
|
height: 100%;
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-center-center);
|
|
@apply(--layout-flex-auto);
|
|
@apply(--paper-tab-content);
|
|
}
|
|
|
|
:host(:not(.iron-selected)) > .tab-content {
|
|
opacity: 0.8;
|
|
|
|
@apply(--paper-tab-content-unselected);
|
|
}
|
|
|
|
:host(:focus) .tab-content {
|
|
opacity: 1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
paper-ripple {
|
|
color: var(--paper-tab-ink, --paper-yellow-a100);
|
|
}
|
|
|
|
.tab-content > ::content > a {
|
|
@apply(--layout-flex-auto);
|
|
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div class="tab-content">
|
|
<content></content>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<script>
|
|
Polymer({
|
|
is: 'paper-tab',
|
|
|
|
behaviors: [
|
|
Polymer.IronControlState,
|
|
Polymer.IronButtonState,
|
|
Polymer.PaperRippleBehavior
|
|
],
|
|
|
|
properties: {
|
|
|
|
/**
|
|
* If true, the tab will forward keyboard clicks (enter/space) to
|
|
* the first anchor element found in its descendants
|
|
*/
|
|
link: {
|
|
type: Boolean,
|
|
value: false,
|
|
reflectToAttribute: true
|
|
}
|
|
|
|
},
|
|
|
|
hostAttributes: {
|
|
role: 'tab'
|
|
},
|
|
|
|
listeners: {
|
|
down: '_updateNoink',
|
|
tap: '_onTap'
|
|
},
|
|
|
|
attached: function() {
|
|
this._updateNoink();
|
|
},
|
|
|
|
get _parentNoink () {
|
|
var parent = Polymer.dom(this).parentNode;
|
|
return !!parent && !!parent.noink;
|
|
},
|
|
|
|
_updateNoink: function() {
|
|
this.noink = !!this.noink || !!this._parentNoink;
|
|
},
|
|
|
|
_onTap: function(event) {
|
|
if (this.link) {
|
|
var anchor = this.queryEffectiveChildren('a');
|
|
|
|
if (!anchor) {
|
|
return;
|
|
}
|
|
|
|
// Don't get stuck in a loop delegating
|
|
// the listener from the child anchor
|
|
if (event.target === anchor) {
|
|
return;
|
|
}
|
|
|
|
anchor.click();
|
|
}
|
|
}
|
|
|
|
});
|
|
</script>
|