Fix OOP <webview> resize and autosize.
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-tabs / paper-tabs.html
blobb913b79b01558573518859cb190675569c7e711e
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 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
13 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
14 <link rel="import" href="../iron-icon/iron-icon.html">
15 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
16 <link rel="import" href="../paper-styles/color.html">
17 <link rel="import" href="paper-tabs-icons.html">
18 <link rel="import" href="paper-tab.html">
20 <!--
21 `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
22 an app, or to browse categorized data sets.
24 Use `selected` property to get or set the selected tab.
26 Example:
28 <paper-tabs selected="0">
29 <paper-tab>TAB 1</paper-tab>
30 <paper-tab>TAB 2</paper-tab>
31 <paper-tab>TAB 3</paper-tab>
32 </paper-tabs>
34 See <a href="#paper-tab">paper-tab</a> for more information about
35 `paper-tab`.
37 A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
38 between different views.
40 <paper-tabs selected="{{selected}}">
41 <paper-tab>Tab 1</paper-tab>
42 <paper-tab>Tab 2</paper-tab>
43 <paper-tab>Tab 3</paper-tab>
44 </paper-tabs>
46 <iron-pages selected="{{selected}}">
47 <div>Page 1</div>
48 <div>Page 2</div>
49 <div>Page 3</div>
50 </iron-pages>
53 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
54 element in `paper-tab`.
56 Example:
58 <paper-tabs selected="0">
59 <paper-tab link>
60 <a href="#link1" class="horizontal center-center layout">TAB ONE</a>
61 </paper-tab>
62 <paper-tab link>
63 <a href="#link2" class="horizontal center-center layout">TAB TWO</a>
64 </paper-tab>
65 <paper-tab link>
66 <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
67 </paper-tab>
68 </paper-tabs>
70 ### Styling
72 The following custom properties and mixins are available for styling:
74 Custom property | Description | Default
75 ----------------|-------------|----------
76 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
77 `--paper-tabs` | Mixin applied to the tabs | `{}`
79 @hero hero.svg
80 @demo demo/index.html
81 -->
83 </head><body><dom-module id="paper-tabs">
85 <style>
87 :host {
88 @apply(--layout);
89 @apply(--layout-center);
91 height: 48px;
92 font-size: 14px;
93 font-weight: 500;
94 overflow: hidden;
95 -webkit-user-select: none;
96 -moz-user-select: none;
97 -ms-user-select: none;
98 user-select: none;
99 -webkit-tap-highlight-color: rgba(0,0,0,0);
101 @apply(--paper-tabs);
104 #tabsContainer {
105 position: relative;
106 height: 100%;
107 white-space: nowrap;
108 overflow: hidden;
111 #tabsContent {
112 height: 100%;
115 #tabsContent.scrollable {
116 position: absolute;
117 white-space: nowrap;
120 .hidden {
121 display: none;
124 .not-visible {
125 opacity: 0;
128 paper-icon-button {
129 width: 24px;
130 padding: 16px;
133 #selectionBar {
134 position: absolute;
135 height: 2px;
136 bottom: 0;
137 left: 0;
138 right: 0;
139 background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
140 -webkit-transform-origin: left center;
141 transform-origin: left center;
142 -webkit-transform: scale(0);
143 transform: scale(0);
144 transition: -webkit-transform;
145 transition: transform;
147 @apply(--paper-tabs-selection-bar);
150 #selectionBar.align-bottom {
151 top: 0;
152 bottom: auto;
155 #selectionBar.expand {
156 transition-duration: 0.15s;
157 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
160 #selectionBar.contract {
161 transition-duration: 0.18s;
162 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
165 #tabsContent > ::content > *:not(#selectionBar) {
166 height: 100%;
169 </style>
171 <template>
173 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown"></paper-icon-button>
175 <div id="tabsContainer" class="flex" on-scroll="_scroll">
177 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
179 <content select="*"></content>
181 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div>
183 </div>
185 </div>
187 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown"></paper-icon-button>
189 </template>
191 </dom-module>
193 <script src="paper-tabs-extracted.js"></script></body></html>