OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
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 | |
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 | |
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 | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> | |
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | |
14 <link rel="import" href="../iron-behaviors/iron-control-state.html"> | |
15 <link rel="import" href="../paper-ripple/paper-ripple.html"> | |
16 | |
17 <!-- | |
18 `paper-tab` is styled to look like a tab. It should be used in conjunction with | |
19 `paper-tabs`. | |
20 | |
21 Example: | |
22 | |
23 <paper-tabs selected="0"> | |
24 <paper-tab>TAB 1</paper-tab> | |
25 <paper-tab>TAB 2</paper-tab> | |
26 <paper-tab>TAB 3</paper-tab> | |
27 </paper-tabs> | |
28 | |
29 ### Styling | |
30 | |
31 The following custom properties and mixins are available for styling: | |
32 | |
33 Custom property | Description | Default | |
34 ----------------|-------------|---------- | |
35 `--paper-tab-ink` | Ink color | `--paper-yellow-a100` | |
36 `--paper-tab` | Mixin applied to the tab | `{}` | |
37 `--paper-tab-content` | Mixin applied to the tab content | `{}` | |
38 | |
39 --> | |
40 | |
41 <dom-module id="paper-tab"> | |
42 | |
43 <style> | |
44 | |
45 :host { | |
46 @apply(--layout-inline); | |
47 @apply(--layout-center); | |
48 @apply(--layout-center-justified); | |
49 @apply(--layout-flex); | |
50 | |
51 position: relative; | |
52 padding: 0 12px; | |
53 overflow: hidden; | |
54 cursor: pointer; | |
55 | |
56 @apply(--paper-tab); | |
57 } | |
58 | |
59 :host(:focus) { | |
60 outline: none; | |
61 } | |
62 | |
63 :host([link]) { | |
64 padding: 0; | |
65 } | |
66 | |
67 .tab-content { | |
68 height: 100%; | |
69 -webkit-transform: translateZ(0); | |
70 transform: translateZ(0); | |
71 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); | |
72 | |
73 @apply(--paper-tab-content); | |
74 } | |
75 | |
76 :host(:not(.iron-selected)) > .tab-content { | |
77 opacity: 0.8; | |
78 } | |
79 | |
80 :host(:focus) .tab-content { | |
81 opacity: 1; | |
82 font-weight: 700; | |
83 } | |
84 | |
85 #ink { | |
86 color: var(--paper-tab-ink, --paper-yellow-a100); | |
87 pointer-events: none; | |
88 } | |
89 | |
90 .tab-content > ::content > a { | |
91 height: 100%; | |
92 /* flex */ | |
93 -ms-flex: 1 1 0.000000001px; | |
94 -webkit-flex: 1; | |
95 flex: 1; | |
96 -webkit-flex-basis: 0.000000001px; | |
97 flex-basis: 0.000000001px; | |
98 } | |
99 | |
100 </style> | |
101 | |
102 <template> | |
103 | |
104 <div class="tab-content flex-auto center-center horizontal layout"> | |
105 <content></content> | |
106 </div> | |
107 | |
108 <template is="dom-if" if="[[!noink]]"> | |
109 <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98
"></paper-ripple> | |
110 </template> | |
111 | |
112 </template> | |
113 | |
114 </dom-module> | |
115 | |
116 <script> | |
117 | |
118 Polymer({ | |
119 | |
120 is: 'paper-tab', | |
121 | |
122 behaviors: [ | |
123 Polymer.IronControlState | |
124 ], | |
125 | |
126 properties: { | |
127 | |
128 /** | |
129 * If true, ink ripple effect is disabled. | |
130 * | |
131 * @attribute noink | |
132 */ | |
133 noink: { | |
134 type: Boolean, | |
135 value: false | |
136 } | |
137 | |
138 }, | |
139 | |
140 hostAttributes: { | |
141 role: 'tab' | |
142 }, | |
143 | |
144 listeners: { | |
145 down: '_onDown' | |
146 }, | |
147 | |
148 get _parentNoink () { | |
149 var parent = Polymer.dom(this).parentNode; | |
150 return !!parent && !!parent.noink; | |
151 }, | |
152 | |
153 _onDown: function(e) { | |
154 this.noink = !!this.noink || !!this._parentNoink; | |
155 } | |
156 }); | |
157 | |
158 </script> | |
OLD | NEW |