Skip to content

Commit 8be8783

Browse files
acburstacburst
committed
Variable width tabs and tabs in navbar
1 parent 2dd646a commit 8be8783

File tree

9 files changed

+202
-58
lines changed

9 files changed

+202
-58
lines changed

‎bin/materialize.css

+54-14
Original file line numberDiff line numberDiff line change
@@ -4068,6 +4068,14 @@ nav {
40684068
line-height: 56px;
40694069
}
40704070

4071+
nav.nav-extended {
4072+
height: auto;
4073+
}
4074+
4075+
nav.nav-extended .nav-wrapper {
4076+
height: auto;
4077+
}
4078+
40714079
nav a {
40724080
color: #fff;
40734081
}
@@ -4787,26 +4795,50 @@ small {
47874795
}
47884796

47894797
.tabs {
4790-
display: -webkit-flex;
4791-
display: -ms-flexbox;
4792-
display: flex;
47934798
position: relative;
47944799
overflow-x: auto;
47954800
overflow-y: hidden;
47964801
height: 48px;
4802+
width: 100%;
47974803
background-color: #fff;
47984804
margin: 0 auto;
4799-
width: 100%;
48004805
white-space: nowrap;
48014806
}
48024807

4803-
.tabs .tab {
4808+
.tabs.tabs-transparent {
4809+
background-color: transparent;
4810+
}
4811+
4812+
.tabs.tabs-transparent .tab a,
4813+
.tabs.tabs-transparent .tab.disabled a,
4814+
.tabs.tabs-transparent .tab.disabled a:hover {
4815+
color: rgba(255, 255, 255, 0.7);
4816+
}
4817+
4818+
.tabs.tabs-transparent .tab a:hover,
4819+
.tabs.tabs-transparent .tab a.active {
4820+
color: #fff;
4821+
}
4822+
4823+
.tabs.tabs-transparent .indicator {
4824+
background-color: #fff;
4825+
}
4826+
4827+
.tabs.tabs-fixed-width {
4828+
display: -webkit-flex;
4829+
display: -ms-flexbox;
4830+
display: flex;
4831+
}
4832+
4833+
.tabs.tabs-fixed-width .tab {
48044834
-webkit-box-flex: 1;
48054835
-webkit-flex-grow: 1;
48064836
-ms-flex-positive: 1;
48074837
flex-grow: 1;
4808-
display: block;
4809-
float: left;
4838+
}
4839+
4840+
.tabs .tab {
4841+
display: inline-block;
48104842
text-align: center;
48114843
line-height: 48px;
48124844
height: 48px;
@@ -4816,26 +4848,28 @@ small {
48164848
text-overflow: ellipsis;
48174849
overflow: hidden;
48184850
letter-spacing: .8px;
4819-
width: 15%;
4820-
min-width: 80px;
48214851
}
48224852

48234853
.tabs .tab a {
4824-
color: #ee6e73;
4854+
color: rgba(238, 110, 115, 0.7);
48254855
display: block;
48264856
width: 100%;
48274857
height: 100%;
4858+
padding: 0 24px;
4859+
font-size: 14px;
48284860
text-overflow: ellipsis;
48294861
overflow: hidden;
48304862
transition: color .28s ease;
48314863
}
48324864

4833-
.tabs .tab a:hover {
4834-
color: #f9c9cb;
4865+
.tabs .tab a:hover, .tabs .tab a.active {
4866+
background-color: transparent;
4867+
color: #ee6e73;
48354868
}
48364869

4837-
.tabs .tab.disabled a {
4838-
color: #f9c9cb;
4870+
.tabs .tab.disabled a,
4871+
.tabs .tab.disabled a:hover {
4872+
color: rgba(238, 110, 115, 0.7);
48394873
cursor: default;
48404874
}
48414875

@@ -4847,6 +4881,12 @@ small {
48474881
will-change: left, right;
48484882
}
48494883

4884+
@media only screen and (max-width: 992px) {
4885+
.tabs .tab a {
4886+
padding: 0 12px;
4887+
}
4888+
}
4889+
48504890
.material-tooltip {
48514891
padding: 10px 8px;
48524892
font-size: 1rem;

‎bin/materialize.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/ghpages-materialize.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jade/page-contents/tabs_content.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<h4>Introduction</h4>
88
<p class="caption">The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible. You can add the class <code class="language-markup">.disabled</code> to make a tab inaccessible. </p>
99

10-
<ul class="tabs tab-demo z-depth-1">
11-
<li class="tab col s3"><a href="#test1">Test 1</a></li>
12-
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
13-
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
14-
<li class="tab col s3"><a href="#test4">Test 4</a></li>
15-
<li class="tab col s3"><a href="#test0">Test 5</a></li>
10+
<ul class="tabs tabs-fixed-width tab-demo z-depth-1">
11+
<li class="tab"><a href="#test1">Test 1</a></li>
12+
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
13+
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
14+
<li class="tab"><a href="#test4">Test 4</a></li>
15+
<li class="tab"><a href="#test0">Test 5</a></li>
1616
</ul>
1717
<div id="test1" class="col s12"><p>Test 1</p></div>
1818
<div id="test2" class="col s12"><p>Test 2</p></div>

‎js/tabs.js

+27-11
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,23 @@
1414
var $this = $(this),
1515
window_width = $(window).width();
1616

17-
$this.width('100%');
1817
var $active, $content, $links = $this.find('li.tab a'),
1918
$tabs_width = $this.width(),
2019
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
2120
$index = 0;
2221

22+
// Finds right attribute for indicator based on active tab.
23+
// el: jQuery Object
24+
var calcRightPos = function(el) {
25+
return $tabs_width - el.position().left - el.outerWidth() - $this.scrollLeft();
26+
};
27+
28+
// Finds left attribute for indicator based on active tab.
29+
// el: jQuery Object
30+
var calcLeftPos = function(el) {
31+
return el.position().left + $this.scrollLeft();
32+
};
33+
2334
// If the location.hash matches one of the links, use that as the active tab.
2435
$active = $($links.filter('[href="'+location.hash+'"]'));
2536

@@ -45,8 +56,12 @@
4556
$this.append('<div class="indicator"></div>');
4657
var $indicator = $this.find('.indicator');
4758
if ($this.is(":visible")) {
48-
$indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
49-
$indicator.css({"left": $index * $tab_width});
59+
// $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
60+
// $indicator.css({"left": $index * $tab_width});
61+
setTimeout(function() {
62+
$indicator.css({"right": calcRightPos($active) });
63+
$indicator.css({"left": calcLeftPos($active) });
64+
}, 0);
5065
}
5166
$(window).resize(function () {
5267
$tabs_width = $this.width();
@@ -55,8 +70,8 @@
5570
$index = 0;
5671
}
5772
if ($tab_width !== 0 && $tabs_width !== 0) {
58-
$indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
59-
$indicator.css({"left": $index * $tab_width});
73+
$indicator.css({"right": calcRightPos($active) });
74+
$indicator.css({"left": calcLeftPos($active) });
6075
}
6176
});
6277

@@ -91,6 +106,7 @@
91106
$active = $(this);
92107
$content = $(this.hash);
93108
$links = $this.find('li.tab a');
109+
var activeRect = $active.position();
94110

95111
// Make the tab active.
96112
$active.addClass('active');
@@ -110,14 +126,14 @@
110126
}
111127

112128
// Update indicator
129+
113130
if (($index - $prev_index) >= 0) {
114-
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
115-
$indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
131+
$indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
132+
$indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
116133

117-
}
118-
else {
119-
$indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
120-
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
134+
} else {
135+
$indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
136+
$indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
121137
}
122138

123139
// Prevent the anchor's default click action

‎sass/components/_navbar.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
nav {
2+
&.nav-extended {
3+
height: auto;
4+
5+
.nav-wrapper {
6+
height: auto;
7+
}
8+
}
9+
210
color: $navbar-font-color;
311
@extend .z-depth-1;
412
background-color: $primary-color;

‎sass/components/_tabs.scss

+53-16
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,45 @@
11
.tabs {
2-
display: flex;
2+
&.tabs-transparent {
3+
background-color: transparent;
4+
5+
.tab a,
6+
.tab.disabled a,
7+
.tab.disabled a:hover {
8+
color: rgba(255,255,255,0.7);
9+
}
10+
11+
.tab a:hover,
12+
.tab a.active {
13+
color: #fff;
14+
}
15+
16+
.indicator {
17+
background-color: #fff;
18+
}
19+
}
20+
21+
&.tabs-fixed-width {
22+
display: flex;
23+
24+
.tab {
25+
-webkit-box-flex: 1;
26+
-webkit-flex-grow: 1;
27+
-ms-flex-positive: 1;
28+
flex-grow: 1;
29+
}
30+
}
31+
332
position: relative;
433
overflow-x: auto;
534
overflow-y: hidden;
635
height: 48px;
36+
width: 100%;
737
background-color: $tabs-bg-color;
838
margin: 0 auto;
9-
width: 100%;
1039
white-space: nowrap;
1140

1241
.tab {
13-
-webkit-box-flex: 1;
14-
-webkit-flex-grow: 1;
15-
-ms-flex-positive: 1;
16-
flex-grow: 1;
17-
display: block;
18-
float: left;
42+
display: inline-block;
1943
text-align: center;
2044
line-height: 48px;
2145
height: 48px;
@@ -25,24 +49,28 @@
2549
text-overflow: ellipsis;
2650
overflow: hidden;
2751
letter-spacing: .8px;
28-
width: 15%;
29-
min-width: 80px;
3052

3153
a {
32-
color: $tabs-text-color;
54+
&:hover,
55+
&.active {
56+
background-color: transparent;
57+
color: $tabs-text-color;
58+
}
59+
60+
color: rgba($tabs-text-color, .7);
3361
display: block;
3462
width: 100%;
3563
height: 100%;
64+
padding: 0 24px;
65+
font-size: 14px;
3666
text-overflow: ellipsis;
3767
overflow: hidden;
3868
transition: color .28s ease;
39-
&:hover {
40-
color: lighten($tabs-text-color, 20%);
41-
}
4269
}
4370

44-
&.disabled a {
45-
color: lighten($tabs-text-color, 20%);
71+
&.disabled a,
72+
&.disabled a:hover {
73+
color: rgba($tabs-text-color, .7);
4674
cursor: default;
4775
}
4876
}
@@ -54,3 +82,12 @@
5482
will-change: left, right;
5583
}
5684
}
85+
86+
// Fixed sideNav hide on smaller
87+
@media #{$medium-and-down} {
88+
.tabs {
89+
.tab a {
90+
padding: 0 12px;
91+
}
92+
}
93+
}

‎tabs.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,12 @@
118118
<h4>Introduction</h4>
119119
<p class="caption">The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible. You can add the class <code class="language-markup">.disabled</code> to make a tab inaccessible. </p>
120120

121-
<ul class="tabs tab-demo z-depth-1">
122-
<li class="tab col s3"><a href="#test1">Test 1</a></li>
123-
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
124-
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
125-
<li class="tab col s3"><a href="#test4">Test 4</a></li>
126-
<li class="tab col s3"><a href="#test0">Test 5</a></li>
121+
<ul class="tabs fixed-width tab-demo z-depth-1">
122+
<li class="tab"><a href="#test1">Test 1</a></li>
123+
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
124+
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
125+
<li class="tab"><a href="#test4">Test 4</a></li>
126+
<li class="tab"><a href="#test0">Test 5</a></li>
127127
</ul>
128128
<div id="test1" class="col s12"><p>Test 1</p></div>
129129
<div id="test2" class="col s12"><p>Test 2</p></div>

0 commit comments

Comments
 (0)