OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.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
"> | 11 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
13 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> | 12 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> |
14 <link rel="import" href="../iron-icon/iron-icon.html"> | 13 <link rel="import" href="../iron-icon/iron-icon.html"> |
15 <link rel="import" href="../paper-icon-button/paper-icon-button.html"> | 14 <link rel="import" href="../paper-icon-button/paper-icon-button.html"> |
16 <link rel="import" href="../paper-styles/color.html"> | 15 <link rel="import" href="../paper-styles/color.html"> |
17 <link rel="import" href="paper-tabs-icons.html"> | 16 <link rel="import" href="paper-tabs-icons.html"> |
18 <link rel="import" href="paper-tab.html"> | 17 <link rel="import" href="paper-tab.html"> |
19 | 18 |
20 <!-- | 19 <!-- |
21 Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) | 20 Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) |
(...skipping 27 matching lines...) Expand all Loading... |
49 <div>Page 1</div> | 48 <div>Page 1</div> |
50 <div>Page 2</div> | 49 <div>Page 2</div> |
51 <div>Page 3</div> | 50 <div>Page 3</div> |
52 </iron-pages> | 51 </iron-pages> |
53 | 52 |
54 | 53 |
55 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` | 54 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` |
56 element in `paper-tab`. | 55 element in `paper-tab`. |
57 | 56 |
58 Example: | 57 Example: |
| 58 <style is="custom-style"> |
| 59 .link { |
| 60 @apply(--layout-horizontal); |
| 61 @apply(--layout-center-center); |
| 62 } |
| 63 } |
| 64 </style> |
59 | 65 |
60 <paper-tabs selected="0"> | 66 <paper-tabs selected="0"> |
61 <paper-tab link> | 67 <paper-tab link> |
62 <a href="#link1" class="horizontal center-center layout">TAB ONE</a> | 68 <a href="#link1" class="link">TAB ONE</a> |
63 </paper-tab> | 69 </paper-tab> |
64 <paper-tab link> | 70 <paper-tab link> |
65 <a href="#link2" class="horizontal center-center layout">TAB TWO</a> | 71 <a href="#link2" class="link">TAB TWO</a> |
66 </paper-tab> | 72 </paper-tab> |
67 <paper-tab link> | 73 <paper-tab link> |
68 <a href="#link3" class="horizontal center-center layout">TAB THREE</a> | 74 <a href="#link3" class="link">TAB THREE</a> |
69 </paper-tab> | 75 </paper-tab> |
70 </paper-tabs> | 76 </paper-tabs> |
71 | 77 |
72 ### Styling | 78 ### Styling |
73 | 79 |
74 The following custom properties and mixins are available for styling: | 80 The following custom properties and mixins are available for styling: |
75 | 81 |
76 Custom property | Description | Default | 82 Custom property | Description | Default |
77 ----------------|-------------|---------- | 83 ----------------|-------------|---------- |
78 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell
ow-a100` | 84 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell
ow-a100` |
(...skipping 26 matching lines...) Expand all Loading... |
105 | 111 |
106 :host-context([dir=rtl]) { | 112 :host-context([dir=rtl]) { |
107 @apply(--layout-horizontal-reverse); | 113 @apply(--layout-horizontal-reverse); |
108 } | 114 } |
109 | 115 |
110 #tabsContainer { | 116 #tabsContainer { |
111 position: relative; | 117 position: relative; |
112 height: 100%; | 118 height: 100%; |
113 white-space: nowrap; | 119 white-space: nowrap; |
114 overflow: hidden; | 120 overflow: hidden; |
| 121 @apply(--layout-flex); |
115 } | 122 } |
116 | 123 |
117 #tabsContent { | 124 #tabsContent { |
118 height: 100%; | 125 height: 100%; |
119 } | 126 } |
120 | 127 |
121 #tabsContent.scrollable { | 128 #tabsContent.scrollable { |
122 position: absolute; | 129 position: absolute; |
123 white-space: nowrap; | 130 white-space: nowrap; |
124 } | 131 } |
125 | 132 |
| 133 #tabsContent.horizontal { |
| 134 @apply(--layout-horizontal); |
| 135 } |
| 136 |
126 .hidden { | 137 .hidden { |
127 display: none; | 138 display: none; |
128 } | 139 } |
129 | 140 |
130 .not-visible { | 141 .not-visible { |
131 opacity: 0; | 142 opacity: 0; |
132 cursor: default; | 143 cursor: default; |
133 } | 144 } |
134 | 145 |
135 paper-icon-button { | 146 paper-icon-button { |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
174 #tabsContent > ::content > *:not(#selectionBar) { | 185 #tabsContent > ::content > *:not(#selectionBar) { |
175 height: 100%; | 186 height: 100%; |
176 } | 187 } |
177 | 188 |
178 </style> | 189 </style> |
179 | 190 |
180 <template> | 191 <template> |
181 | 192 |
182 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu
ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU
p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> | 193 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu
ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU
p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> |
183 | 194 |
184 <div id="tabsContainer" class="flex" on-track="_scroll" on-down="_down"> | 195 <div id="tabsContainer" on-track="_scroll" on-down="_down"> |
185 | 196 |
186 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"> | 197 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"> |
187 | 198 |
188 <content select="*"></content> | 199 <content select="*"></content> |
189 | 200 |
190 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB
ottom)]]" on-transitionend="_onBarTransitionEnd"></div> | 201 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB
ottom)]]" on-transitionend="_onBarTransitionEnd"></div> |
191 | 202 |
192 </div> | 203 </div> |
193 | 204 |
194 </div> | 205 </div> |
195 | 206 |
196 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB
uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto
nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> | 207 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB
uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto
nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> |
197 | 208 |
198 </template> | 209 </template> |
199 | 210 |
200 </dom-module> | 211 </dom-module> |
201 | 212 |
202 <script src="paper-tabs-extracted.js"></script></body></html> | 213 <script src="paper-tabs-extracted.js"></script></body></html> |
OLD | NEW |