| 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 |