Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(21)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs.html

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tab.html ('k') | third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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">
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
49 <div>Page 2</div> 49 <div>Page 2</div>
50 <div>Page 3</div> 50 <div>Page 3</div>
51 </iron-pages> 51 </iron-pages>
52 52
53 53
54 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>`
55 element in `paper-tab`. 55 element in `paper-tab`.
56 56
57 Example: 57 Example:
58 58
59 <style is="custom-style"> 59 <pre><code>
60 .link { 60 &lt;style is="custom-style">
61 @apply(--layout-horizontal); 61 .link {
62 @apply(--layout-center-center); 62 &#64;apply(--layout-horizontal);
63 } 63 &#64;apply(--layout-center-center);
64 </style> 64 }
65 &lt;/style>
65 66
66 <paper-tabs selected="0"> 67 &lt;paper-tabs selected="0">
67 <paper-tab link> 68 &lt;paper-tab link>
68 <a href="#link1" class="link">TAB ONE</a> 69 &lt;a href="#link1" class="link">TAB ONE&lt;/a>
69 </paper-tab> 70 &lt;/paper-tab>
70 <paper-tab link> 71 &lt;paper-tab link>
71 <a href="#link2" class="link">TAB TWO</a> 72 &lt;a href="#link2" class="link">TAB TWO&lt;/a>
72 </paper-tab> 73 &lt;/paper-tab>
73 <paper-tab link> 74 &lt;paper-tab link>
74 <a href="#link3" class="link">TAB THREE</a> 75 &lt;a href="#link3" class="link">TAB THREE&lt;/a>
75 </paper-tab> 76 &lt;/paper-tab>
76 </paper-tabs> 77 &lt;/paper-tabs>
78 </code></pre>
77 79
78 ### Styling 80 ### Styling
79 81
80 The following custom properties and mixins are available for styling: 82 The following custom properties and mixins are available for styling:
81 83
82 Custom property | Description | Default 84 Custom property | Description | Default
83 ----------------|-------------|---------- 85 ----------------|-------------|----------
84 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell ow-a100` 86 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell ow-a100`
87 `--paper-tabs-selection-bar` | Mixin applied to the selection bar | {}
85 `--paper-tabs` | Mixin applied to the tabs | `{}` 88 `--paper-tabs` | Mixin applied to the tabs | `{}`
86 89
87 @hero hero.svg 90 @hero hero.svg
88 @demo demo/index.html 91 @demo demo/index.html
89 --> 92 -->
90 93
91 </head><body><dom-module id="paper-tabs"> 94 </head><body><dom-module id="paper-tabs">
92 <template> 95 <template>
93 <style> 96 <style>
94 :host { 97 :host {
95 @apply(--layout); 98 @apply(--layout);
96 @apply(--layout-center); 99 @apply(--layout-center);
97 100
98 height: 48px; 101 height: 48px;
99 font-size: 14px; 102 font-size: 14px;
100 font-weight: 500; 103 font-weight: 500;
101 overflow: hidden; 104 overflow: hidden;
102 -moz-user-select: none; 105 -moz-user-select: none;
103 -ms-user-select: none; 106 -ms-user-select: none;
104 -webkit-user-select: none; 107 -webkit-user-select: none;
105 user-select: none; 108 user-select: none;
106 -webkit-tap-highlight-color: rgba(0,0,0,0); 109
110 /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
111 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
112 -webkit-tap-highlight-color: transparent;
107 113
108 @apply(--paper-tabs); 114 @apply(--paper-tabs);
109 } 115 }
110 116
111 :host-context([dir=rtl]) { 117 :host-context([dir=rtl]) {
112 @apply(--layout-horizontal-reverse); 118 @apply(--layout-horizontal-reverse);
113 } 119 }
114 120
115 #tabsContainer { 121 #tabsContainer {
116 position: relative; 122 position: relative;
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
186 192
187 #tabsContent > ::content > *:not(#selectionBar) { 193 #tabsContent > ::content > *:not(#selectionBar) {
188 height: 100%; 194 height: 100%;
189 } 195 }
190 </style> 196 </style>
191 197
192 <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> 198 <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 199
194 <div id="tabsContainer" on-track="_scroll" on-down="_down"> 200 <div id="tabsContainer" on-track="_scroll" on-down="_down">
195 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"> 201 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
202 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div>
196 <content select="*"></content> 203 <content select="*"></content>
197 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div>
198 </div> 204 </div>
199 </div> 205 </div>
200 206
201 <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>
202 208
203 </template> 209 </template>
204 210
205 </dom-module> 211 </dom-module>
206 <script src="paper-tabs-extracted.js"></script></body></html> 212 <script src="paper-tabs-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tab.html ('k') | third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698