Skip to content

Commit dfc580d

Browse files
andrewseguintinayuangao
andrewseguin
authored and
tinayuangao
committed
fix(tabs): tabs should update when tabs are added or removed (#2014)
* latest changes * Use content checked * add demo * cleanup demo * fix dynamic height on new tabs * write tests * add comments, remove md-tab-body prefix * rebase
1 parent 6534eb0 commit dfc580d

13 files changed

+763
-243
lines changed

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

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,79 @@ <h1>Tab Nav Bar</h1>
1414
</div>
1515

1616

17+
<h1>Tab Group Demo - Dynamic Tabs</h1>
18+
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+
39+
<div>
40+
Selected tab index:
41+
<md-input type="number" [(ngModel)]="activeTabIndex"></md-input>
42+
</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.
63+
<br>
64+
<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.
71+
<br>
72+
<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>
89+
1790
<h1>Tab Group Demo - Dynamic Height</h1>
1891

1992
<md-tab-group class="demo-tab-group" md-dynamic-height>
@@ -129,4 +202,4 @@ <h1>Tabs with simplified api</h1>
129202
<md-tab label="Fire">
130203
This tab is about combustion!
131204
</md-tab>
132-
</md-tab-group>
205+
</md-tab-group>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.demo-nav-bar {
22
border: 1px solid #e0e0e0;
3+
margin-bottom: 40px;
34
[md-tab-nav-bar] {
45
background: #f9f9f9;
56
}
@@ -13,10 +14,28 @@
1314

1415
.demo-tab-group {
1516
border: 1px solid #e0e0e0;
17+
margin-bottom: 40px;
1618
.md-tab-header {
1719
background: #f9f9f9;
1820
}
1921
.md-tab-body-content {
2022
padding: 12px;
2123
}
24+
}
25+
26+
tabs-demo md-card {
27+
width: 160px;
28+
29+
md-checkbox {
30+
display: block;
31+
margin-top: 8px;
32+
}
33+
34+
md-input {
35+
width: 100px;
36+
}
37+
38+
button {
39+
width: 100%;
40+
}
2241
}

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

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,52 @@ import {Observable} from 'rxjs/Observable';
1010
encapsulation: ViewEncapsulation.None,
1111
})
1212
export class TabsDemo {
13+
// Nav bar demo
1314
tabLinks = [
1415
{label: 'Sun', link: 'sunny-tab'},
1516
{label: 'Rain', link: 'rainy-tab'},
1617
{label: 'Fog', link: 'foggy-tab'},
1718
];
1819
activeLinkIndex = 0;
1920

21+
// Standard tabs demo
2022
tabs = [
2123
{
22-
label: 'Tab One',
23-
content: 'This is the body of the first tab'},
24-
{
25-
label: 'Tab Two',
24+
label: 'Tab 1',
25+
content: 'This is the body of the first tab'
26+
}, {
27+
label: 'Tab 2',
2628
disabled: true,
27-
content: 'This is the body of the second tab'},
28-
{
29-
label: 'Tab Three',
29+
content: 'This is the body of the second tab'
30+
}, {
31+
label: 'Tab 3',
3032
extraContent: true,
31-
content: 'This is the body of the third tab'},
33+
content: 'This is the body of the third tab'
34+
}, {
35+
label: 'Tab 4',
36+
content: 'This is the body of the fourth tab'
37+
},
38+
];
39+
40+
// Dynamic tabs demo
41+
activeTabIndex = 0;
42+
addTabPosition = 0;
43+
gotoNewTabAfterAdding = false;
44+
createWithLongContent = false;
45+
dynamicTabs = [
3246
{
33-
label: 'Tab Four',
47+
label: 'Tab 1',
48+
content: 'This is the body of the first tab'
49+
}, {
50+
label: 'Tab 2',
51+
disabled: true,
52+
content: 'This is the body of the second tab'
53+
}, {
54+
label: 'Tab 3',
55+
extraContent: true,
56+
content: 'This is the body of the third tab'
57+
}, {
58+
label: 'Tab 4',
3459
content: 'This is the body of the fourth tab'
3560
},
3661
];
@@ -50,6 +75,22 @@ export class TabsDemo {
5075
this.activeLinkIndex =
5176
this.tabLinks.indexOf(this.tabLinks.find(tab => router.url.indexOf(tab.link) != -1));
5277
}
78+
79+
addTab(includeExtraContent: boolean): void {
80+
this.dynamicTabs.splice(this.addTabPosition, 0, {
81+
label: 'New Tab ' + (this.dynamicTabs.length + 1),
82+
content: 'New tab contents ' + (this.dynamicTabs.length + 1),
83+
extraContent: includeExtraContent
84+
});
85+
86+
if (this.gotoNewTabAfterAdding) {
87+
this.activeTabIndex = this.addTabPosition;
88+
}
89+
}
90+
91+
deleteTab(tab: any) {
92+
this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
93+
}
5394
}
5495

5596

‎src/lib/tabs/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from './tabs';
1+
export * from './tab-group';

‎src/lib/tabs/ink-bar.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,27 @@ export class MdInkBar {
1010

1111
/**
1212
* Calculates the styles from the provided element in order to align the ink-bar to that element.
13+
* Shows the ink bar if previously set as hidden.
1314
* @param element
1415
*/
1516
alignToElement(element: HTMLElement) {
17+
this.show();
1618
this._renderer.setElementStyle(this._elementRef.nativeElement, 'left',
1719
this._getLeftPosition(element));
1820
this._renderer.setElementStyle(this._elementRef.nativeElement, 'width',
1921
this._getElementWidth(element));
2022
}
2123

24+
/** Shows the ink bar. */
25+
show(): void {
26+
this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'visible');
27+
}
28+
29+
/** Hides the ink bar. */
30+
hide(): void {
31+
this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
32+
}
33+
2234
/**
2335
* Generates the pixel distance from the left based on the provided element in string format.
2436
* @param element

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="md-tab-body-content"
1+
<div class="md-tab-body-content" #content
22
[@translateTab]="_position"
33
(@translateTab.start)="_onTranslateTabStarted($event)"
44
(@translateTab.done)="_onTranslateTabComplete($event)">

0 commit comments

Comments
 (0)