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

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 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 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-extracted.js ('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 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
45 </paper-tabs> 45 </paper-tabs>
46 46
47 <iron-pages selected="{{selected}}"> 47 <iron-pages selected="{{selected}}">
48 <div>Page 1</div> 48 <div>Page 1</div>
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` with a `tabindex` of -1.
56 56
57 Example: 57 Example:
58 58
59 <pre><code> 59 <pre><code>
60 &lt;style is="custom-style"> 60 &lt;style is="custom-style">
61 .link { 61 .link {
62 &#64;apply(--layout-horizontal); 62 &#64;apply(--layout-horizontal);
63 &#64;apply(--layout-center-center); 63 &#64;apply(--layout-center-center);
64 } 64 }
65 &lt;/style> 65 &lt;/style>
66 66
67 &lt;paper-tabs selected="0"> 67 &lt;paper-tabs selected="0">
68 &lt;paper-tab link> 68 &lt;paper-tab link>
69 &lt;a href="#link1" class="link">TAB ONE&lt;/a> 69 &lt;a href="#link1" class="link" tabindex="-1">TAB ONE&lt;/a>
70 &lt;/paper-tab> 70 &lt;/paper-tab>
71 &lt;paper-tab link> 71 &lt;paper-tab link>
72 &lt;a href="#link2" class="link">TAB TWO&lt;/a> 72 &lt;a href="#link2" class="link" tabindex="-1">TAB TWO&lt;/a>
73 &lt;/paper-tab> 73 &lt;/paper-tab>
74 &lt;paper-tab link> 74 &lt;paper-tab link>
75 &lt;a href="#link3" class="link">TAB THREE&lt;/a> 75 &lt;a href="#link3" class="link" tabindex="-1">TAB THREE&lt;/a>
76 &lt;/paper-tab> 76 &lt;/paper-tab>
77 &lt;/paper-tabs> 77 &lt;/paper-tabs>
78 </code></pre> 78 </code></pre>
79 79
80 ### Styling 80 ### Styling
81 81
82 The following custom properties and mixins are available for styling: 82 The following custom properties and mixins are available for styling:
83 83
84 Custom property | Description | Default 84 Custom property | Description | Default
85 ----------------|-------------|---------- 85 ----------------|-------------|----------
86 `--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 | {} 87 `--paper-tabs-selection-bar` | Mixin applied to the selection bar | `{}`
88 `--paper-tabs` | Mixin applied to the tabs | `{}` 88 `--paper-tabs` | Mixin applied to the tabs | `{}`
89 89
90 @hero hero.svg 90 @hero hero.svg
91 @demo demo/index.html 91 @demo demo/index.html
92 --> 92 -->
93 93
94 </head><body><dom-module id="paper-tabs"> 94 </head><body><dom-module id="paper-tabs">
95 <template> 95 <template>
96 <style> 96 <style>
97 :host { 97 :host {
98 @apply(--layout); 98 @apply(--layout);
99 @apply(--layout-center); 99 @apply(--layout-center);
100 100
101 height: 48px; 101 height: 48px;
102 font-size: 14px; 102 font-size: 14px;
103 font-weight: 500; 103 font-weight: 500;
104 overflow: hidden; 104 overflow: hidden;
105 -moz-user-select: none; 105 -moz-user-select: none;
106 -ms-user-select: none; 106 -ms-user-select: none;
107 -webkit-user-select: none; 107 -webkit-user-select: none;
108 user-select: none; 108 user-select: none;
109 109
110 /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */ 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); 111 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
112 -webkit-tap-highlight-color: transparent; 112 -webkit-tap-highlight-color: transparent;
113 113
114 @apply(--paper-tabs); 114 @apply(--paper-tabs);
115 } 115 }
116 116
117 :host-context([dir=rtl]) { 117 :host-context([dir=rtl]) {
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
203 <content select="*"></content> 203 <content select="*"></content>
204 </div> 204 </div>
205 </div> 205 </div>
206 206
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> 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>
208 208
209 </template> 209 </template>
210 210
211 </dom-module> 211 </dom-module>
212 <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-extracted.js ('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