├── README.md ├── bower.json ├── demo.html ├── index.html ├── metadata.html ├── paper-tab.css ├── paper-tab.html ├── paper-tabs.css └── paper-tabs.html /README.md: -------------------------------------------------------------------------------- 1 | paper-tabs 2 | ============ 3 | 4 | **This element is compatible with Polymer 0.5 and lower only, and will be deprecated.** 5 | You can check out a similar 0.8+-compatible version of this element at [https://github.com/polymerelements/paper-tabs](https://github.com/polymerelements/paper-tabs) 6 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-tabs", 3 | "private": true, 4 | "dependencies": { 5 | "core-icons": "Polymer/core-icons#master", 6 | "core-selector": "Polymer/core-selector#master", 7 | "core-toolbar": "Polymer/core-toolbar#master", 8 | "core-media-query": "Polymer/core-media-query#master", 9 | "font-roboto": "Polymer/font-roboto#master", 10 | "paper-icon-button": "Polymer/paper-icon-button#master", 11 | "paper-ripple": "Polymer/paper-ripple#master", 12 | "core-resizable": "Polymer/core-resizable#master" 13 | } 14 | } -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | paper-tabs 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 72 | 73 | 74 | 75 | 76 |

A. No ink effect and no sliding bar

77 | 78 | 79 | 80 | ITEM ONE 81 | ITEM TWO 82 | ITEM THREE 83 | 84 | 85 | 86 |
87 |
88 | 89 |

B. The bottom bar appears to indicate the selected tab, but without sliding effect.

90 | 91 | 92 | 93 | ITEM ONE 94 | ITEM TWO 95 | ITEM THREE 96 | 97 | 98 | 99 |
100 |
101 | 102 |

C. The bar slides to the selected tab

103 | 104 | 105 | 106 | ITEM ONE 107 | ITEM TWO 108 | ITEM THREE 109 | 110 | 111 | 112 |
113 |
114 | 115 |

D. Inky Tabs

116 | 117 | 118 | 119 | ITEM ONE 120 | ITEM TWO 121 | ITEM THREE 122 | 123 | 124 | 125 |
126 |
127 | 128 | 129 | 130 | ITEM ONE 131 | ITEM TWO 132 | ITEM THREE 133 | 134 | 135 | 136 |
137 |
138 | 139 |

E. Scrollable Tabs

140 | 141 | 142 | 143 | NUMBER ONE ITEM 144 | ITEM TWO 145 | THE THIRD ITEM 146 | THE ITEM FOUR 147 | FIFTH 148 | THE SIXTH TAB 149 | NUMBER SEVEN 150 | EIGHT 151 | NUMBER NINE 152 | THE TENTH 153 | THE ITEM ELEVEN 154 | TWELFTH ITEM 155 | 156 | 157 | 158 |
159 |
160 | 161 |

F. Link Tabs

162 | 163 | 164 | 165 | ITEM ONE 166 | ITEM TWO 167 | ITEM THREE 168 | 169 | 170 | 171 |
172 |
173 | 174 |

G. Tabs in Toolbar

175 | 176 | 177 | 178 | 179 |
Title
180 | 181 | 182 | 183 |
184 | 185 | 186 | 187 | ITEM ONE 188 | ITEM TWO 189 | ITEM THREE 190 | 191 | 192 | 193 |
194 | 195 | 196 | 197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | ITEM ONE 205 | ITEM TWO 206 | 207 | 208 | 209 |
210 | 211 | 212 | 213 | 214 | 215 |
216 |
217 | 218 |

H. Tabs aligned to bottom

219 | 220 | 221 | 222 | ITEM ONE 223 | ITEM TWO 224 | ITEM THREE 225 | 226 | 227 | 228 | 229 | 230 | 231 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /metadata.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 53 | 54 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /paper-tab.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 | Code distributed by Google as part of the polymer project is also 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 | */ 9 | 10 | :host { 11 | position: relative; 12 | overflow: hidden; 13 | cursor: default; 14 | } 15 | 16 | .tab-content { 17 | transition: opacity .1s cubic-bezier(0.4, 0.0, 1, 1), color .1s cubic-bezier(0.4, 0.0, 1, 1); 18 | height: 100%; 19 | margin: 0 12px; 20 | } 21 | 22 | :host-context(#tabsContainer.scrollable) .tab-content { 23 | margin: 0 24px; 24 | } 25 | 26 | :host-context(paper-tabs[link]) .tab-content { 27 | margin: 0 !important; 28 | } 29 | 30 | polyfill-next-selector { content: '.core-narrow #tabsContainer.scrollable :host .tab-content'; } 31 | :host-context(.core-narrow):host-context(#tabsContainer.scrollable) .tab-content { 32 | margin: 0 12px; 33 | } 34 | 35 | :host(:not(.core-selected)) .tab-content { 36 | opacity: 0.6; 37 | } 38 | 39 | #ink { 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | bottom: 0; 44 | left: 0; 45 | color: #ffff8d; 46 | pointer-events: none; 47 | } 48 | 49 | polyfill-next-selector { content: '.tab-content > a'; } 50 | ::content > a { 51 | height: 100%; 52 | padding: 0 12px; 53 | /* flex */ 54 | -ms-flex: 1 1 0.000000001px; 55 | -webkit-flex: 1; 56 | flex: 1; 57 | -webkit-flex-basis: 0.000000001px; 58 | flex-basis: 0.000000001px; 59 | } 60 | -------------------------------------------------------------------------------- /paper-tab.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 34 | 35 | 36 | 37 | 38 | 46 | 82 | 83 | -------------------------------------------------------------------------------- /paper-tabs.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 | Code distributed by Google as part of the polymer project is also 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 | */ 9 | 10 | :host { 11 | display: block; 12 | font-size: 14px; 13 | font-weight: 500; 14 | height: 48px; 15 | overflow: hidden; 16 | -webkit-user-select: none; 17 | -moz-user-select: none; 18 | -ms-user-select: none; 19 | user-select: none; 20 | -webkit-tap-highlight-color: rgba(0,0,0,0); 21 | } 22 | 23 | #tabsContainer { 24 | position: relative; 25 | height: 100%; 26 | white-space: nowrap; 27 | overflow: hidden; 28 | } 29 | 30 | #tabsContent { 31 | height: 100%; 32 | } 33 | 34 | #tabsContainer.scrollable > #tabsContent { 35 | position: absolute; 36 | white-space: nowrap; 37 | } 38 | 39 | .scroll-button { 40 | width: 40px; 41 | padding: 0 12px; 42 | } 43 | 44 | .scroll-button > paper-icon-button { 45 | transition: opacity 0.18s; 46 | } 47 | 48 | .scroll-button > .hidden { 49 | opacity: 0; 50 | } 51 | 52 | #selectionBar { 53 | position: absolute; 54 | height: 2px; 55 | bottom: 0; 56 | left: 0; 57 | width: 0; 58 | background-color: #ffff8d; 59 | transition: width, left; 60 | } 61 | 62 | #selectionBar.alignBottom { 63 | top: 0; 64 | bottom: auto; 65 | } 66 | 67 | #selectionBar.expand { 68 | transition-duration: 0.15s; 69 | transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); 70 | } 71 | 72 | #selectionBar.contract { 73 | transition-duration: 0.18s; 74 | transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); 75 | } 76 | 77 | polyfill-next-selector { content: '#tabsContent > *:not(#selectionBar)'; } 78 | ::content > * { 79 | height: 100%; 80 | } 81 | -------------------------------------------------------------------------------- /paper-tabs.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 112 | 353 | 354 | --------------------------------------------------------------------------------