Skip to content

Commit 92e26d7

Browse files
andrewseguinmmalerba
andrewseguin
authored and
mmalerba
committed
feat(tabs): paginate tab header when exceeds width (#2084)
* initial implementation of scrolling * add scrolling when clicking on tab * fix rtl * create component for header * rebase * support stretch * do not focus() the selected index * be sure to scroll to selected index after view * be sure to scroll to selected index after view coment * fix tests * cleanup dynamic tab demo * fix tests, make Dir optional * remove Dir import in spec * restore html * remove index to focus * reduce the amount of layout reflows * fix test for IE/Safari by using minwidth * fix lint * remove internal TODO comment * remove private on functions/variables used in template * fix tests for latest ripple changes * remove double quotes
1 parent d11cb7b commit 92e26d7

File tree

12 files changed

+841
-338
lines changed

12 files changed

+841
-338
lines changed

‎src/demo-app/tabs/tabs-demo.html

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,76 +16,79 @@ <h1>Tab Nav Bar</h1>
1616

1717
<h1>Tab Group Demo - Dynamic Tabs</h1>
1818

19-
<md-card>
20-
<md-card-title>Add New Tab</md-card-title>
21-
<md-card-content>
22-
<md-checkbox [(ngModel)]="createWithLongContent">
23-
Include extra content
24-
</md-checkbox>
25-
<md-checkbox [(ngModel)]="gotoNewTabAfterAdding">
26-
Select after adding
27-
</md-checkbox>
28-
<div>
29-
Position:
30-
<md-input type="number" [(ngModel)]="addTabPosition"></md-input>
31-
</div>
32-
<button md-raised-button color="primary"
33-
(click)="addTab(createWithLongContent)">
34-
Add
35-
</button>
36-
</md-card-content>
37-
</md-card>
38-
3919
<div>
4020
Selected tab index:
4121
<md-input type="number" [(ngModel)]="activeTabIndex"></md-input>
4222
</div>
43-
<md-tab-group class="demo-tab-group"
44-
md-dynamic-height
45-
[(selectedIndex)]="activeTabIndex">
46-
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
47-
<template md-tab-label>{{tab.label}}</template>
48-
{{tab.content}}
49-
<br>
50-
<br>
51-
<div *ngIf="tab.extraContent">
52-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
53-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
54-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
55-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
56-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
57-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
58-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
59-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
60-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
61-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
62-
orci posuere, nec luctus mauris semper.
23+
24+
<div class="demo-dynamic-tabs">
25+
<md-card>
26+
<md-card-title>Add New Tab</md-card-title>
27+
<md-card-content>
28+
<md-checkbox [(ngModel)]="createWithLongContent">
29+
Include extra content
30+
</md-checkbox>
31+
<md-checkbox [(ngModel)]="gotoNewTabAfterAdding">
32+
Select after adding
33+
</md-checkbox>
34+
<div>
35+
Position:
36+
<md-input type="number" [(ngModel)]="addTabPosition"></md-input>
37+
</div>
38+
<button md-raised-button color="primary"
39+
(click)="addTab(createWithLongContent)">
40+
Add
41+
</button>
42+
</md-card-content>
43+
</md-card>
44+
45+
<md-tab-group class="demo-tab-group"
46+
md-dynamic-height
47+
[(selectedIndex)]="activeTabIndex">
48+
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
49+
<template md-tab-label>{{tab.label}}</template>
50+
{{tab.content}}
6351
<br>
6452
<br>
65-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
66-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
67-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
68-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
69-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
70-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
53+
<div *ngIf="tab.extraContent">
54+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
55+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
56+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
57+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
58+
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
59+
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
60+
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
61+
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
62+
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
63+
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
64+
orci posuere, nec luctus mauris semper.
65+
<br>
66+
<br>
67+
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
68+
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
69+
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
70+
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
71+
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
72+
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
73+
<br>
74+
<br>
75+
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
76+
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
77+
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
78+
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
79+
</div>
7180
<br>
7281
<br>
73-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
74-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
75-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
76-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
77-
</div>
78-
<br>
79-
<br>
80-
<md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
81-
<br><br>
82-
<button md-raised-button
83-
[disabled]="dynamicTabs.length == 1"
84-
(click)="deleteTab(tab)">
85-
Delete Tab
86-
</button>
87-
</md-tab>
88-
</md-tab-group>
82+
<md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
83+
<br><br>
84+
<button md-raised-button
85+
[disabled]="dynamicTabs.length == 1"
86+
(click)="deleteTab(tab)">
87+
Delete Tab
88+
</button>
89+
</md-tab>
90+
</md-tab-group>
91+
</div>
8992

9093
<h1>Tab Group Demo - Dynamic Height</h1>
9194

‎src/demo-app/tabs/tabs-demo.scss

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,33 @@
2626
tabs-demo md-card {
2727
width: 160px;
2828

29-
md-checkbox {
30-
display: block;
31-
margin-top: 8px;
32-
}
29+
}
30+
31+
.demo-dynamic-tabs {
32+
display: flex;
33+
width: 100%;
3334

34-
md-input {
35-
width: 100px;
35+
md-tab-group {
36+
min-width: 200px;
37+
margin-bottom: 0;
38+
flex-grow: 1;
3639
}
3740

38-
button {
39-
width: 100%;
41+
md-card {
42+
min-width: 160px;
43+
margin-right: 16px;
44+
45+
md-checkbox {
46+
display: block;
47+
margin-top: 8px;
48+
}
49+
50+
md-input {
51+
width: 100px;
52+
}
53+
54+
button {
55+
width: 100%;
56+
}
4057
}
4158
}

‎src/e2e-app/tabs/tabs-e2e.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<md-tab-group>
33
<md-tab>
44
<template md-tab-label>One</template>
5-
<template md-tab-content>First tab's content</template>
5+
First tab's content
66
</md-tab>
77
<md-tab>
88
<template md-tab-label>Two</template>
9-
<template md-tab-content>Second tab's content</template>
9+
Second tab's content
1010
</md-tab>
1111
<md-tab>
1212
<template md-tab-label>Three</template>
13-
<template md-tab-content>Third tab's content</template>
13+
Third tab's content
1414
</md-tab>
1515
</md-tab-group>
1616
</section>

‎src/lib/tabs/tab-group.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<div class="md-tab-header" role="tablist"
2-
(keydown)="handleKeydown($event)">
1+
<md-tab-header [selectedIndex]="selectedIndex" #tabHeader
2+
(indexFocused)="_focusChanged($event)"
3+
(selectFocusedIndex)="selectedIndex = $event">
34
<div class="md-tab-label" role="tab" md-tab-label-wrapper md-ripple
45
*ngFor="let tab of _tabs; let i = index"
56
[id]="_getTabLabelId(i)"
67
[tabIndex]="selectedIndex == i ? 0 : -1"
78
[attr.aria-controls]="_getTabContentId(i)"
89
[attr.aria-selected]="selectedIndex == i"
910
[class.md-tab-label-active]="selectedIndex == i"
10-
[class.md-tab-disabled]="tab.disabled"
11-
(click)="focusIndex = selectedIndex = i">
11+
[disabled]="tab.disabled"
12+
(click)="tabHeader.focusIndex = selectedIndex = i">
1213

1314
<!-- If there is a label template, use it. -->
1415
<template [ngIf]="tab.templateLabel">
@@ -18,8 +19,8 @@
1819
<!-- If there is not a label template, fall back to the text label. -->
1920
<template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</template>
2021
</div>
21-
<md-ink-bar></md-ink-bar>
22-
</div>
22+
</md-tab-header>
23+
2324
<div class="md-tab-body-wrapper" #tabBodyWrapper>
2425
<md-tab-body role="tabpanel"
2526
*ngFor="let tab of _tabs; let i = index"

‎src/lib/tabs/tab-group.scss

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
font-family: $md-font-family;
99
}
1010

11-
// Styling for the heading containing the tab labels
12-
.md-tab-header {
13-
@include tab-header;
14-
}
15-
1611
// Wraps each tab label
1712
.md-tab-label {
1813
@include tab-label;
@@ -30,11 +25,6 @@
3025
flex-grow: 1;
3126
}
3227

33-
// The ink bar that displays next to the active tab
34-
md-ink-bar {
35-
@include ink-bar;
36-
}
37-
3828
// The bottom section of the view; contains the tab bodies
3929
.md-tab-body-wrapper {
4030
position: relative;

0 commit comments

Comments
 (0)