Skip to content

Commit 572b36e

Browse files
andrewseguinjelbourn
andrewseguin
authored and
jelbourn
committed
feat(tab-nav-bar): add initial functionality of tab nav bar (#1589)
1 parent 9e849cf commit 572b36e

19 files changed

+329
-83
lines changed

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,7 @@ import {SidenavDemo} from './sidenav/sidenav-demo';
3232
import {SnackBarDemo} from './snack-bar/snack-bar-demo';
3333
import {PortalDemo, ScienceJoke} from './portal/portal-demo';
3434
import {MenuDemo} from './menu/menu-demo';
35-
import {TabsDemo} from './tabs/tab-group-demo';
36-
37-
35+
import {TabsDemoModule} from './tabs/tabs-demo.module';
3836

3937
@NgModule({
4038
imports: [
@@ -43,6 +41,7 @@ import {TabsDemo} from './tabs/tab-group-demo';
4341
HttpModule,
4442
RouterModule.forRoot(DEMO_APP_ROUTES),
4543
MaterialModule.forRoot(),
44+
TabsDemoModule,
4645
],
4746
declarations: [
4847
BaselineDemo,
@@ -76,7 +75,6 @@ import {TabsDemo} from './tabs/tab-group-demo';
7675
SliderDemo,
7776
SlideToggleDemo,
7877
SpagettiPanel,
79-
TabsDemo,
8078
ToolbarDemo,
8179
TooltipDemo,
8280
],

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Home} from './demo-app';
33
import {ButtonDemo} from '../button/button-demo';
44
import {BaselineDemo} from '../baseline/baseline-demo';
55
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
6-
import {TabsDemo} from '../tabs/tab-group-demo';
6+
import {TabsDemo} from '../tabs/tabs-demo';
77
import {GridListDemo} from '../grid-list/grid-list-demo';
88
import {GesturesDemo} from '../gestures/gestures-demo';
99
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
@@ -27,7 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
2727
import {DialogDemo} from '../dialog/dialog-demo';
2828
import {TooltipDemo} from '../tooltip/tooltip-demo';
2929
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
30-
30+
import {TABS_DEMO_ROUTES} from '../tabs/routes';
3131

3232
export const DEMO_APP_ROUTES: Routes = [
3333
{path: '', component: Home},
@@ -51,7 +51,7 @@ export const DEMO_APP_ROUTES: Routes = [
5151
{path: 'live-announcer', component: LiveAnnouncerDemo},
5252
{path: 'gestures', component: GesturesDemo},
5353
{path: 'grid-list', component: GridListDemo},
54-
{path: 'tabs', component: TabsDemo},
54+
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
5555
{path: 'button-toggle', component: ButtonToggleDemo},
5656
{path: 'baseline', component: BaselineDemo},
5757
{path: 'ripple', component: RippleDemo},

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Routes} from '@angular/router';
2+
3+
import {SunnyTabContent, RainyTabContent, FoggyTabContent} from '../tabs/tabs-demo';
4+
5+
export const TABS_DEMO_ROUTES: Routes = [
6+
{path: '', redirectTo: 'sunny-tab', pathMatch: 'full'},
7+
{path: 'sunny-tab', component: SunnyTabContent},
8+
{path: 'rainy-tab', component: RainyTabContent},
9+
{path: 'foggy-tab', component: FoggyTabContent},
10+
];

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/demo-app/tabs/tab-group-demo.html‎ renamed to ‎src/demo-app/tabs/tabs-demo.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
<h1>Tab Nav Bar</h1>
2+
3+
<div class="demo-nav-bar">
4+
<nav md-tab-nav-bar aria-label="weather navigation links">
5+
<a md-tab-link
6+
*ngFor="let tabLink of tabLinks; let i = index"
7+
[routerLink]="tabLink.link"
8+
[active]="activeLinkIndex === i"
9+
(click)="activeLinkIndex = i">
10+
{{tabLink.label}}
11+
</a>
12+
</nav>
13+
<router-outlet></router-outlet>
14+
</div>
15+
16+
117
<h1>Tab Group Demo</h1>
218

319
<md-tab-group class="demo-tab-group">
@@ -13,6 +29,7 @@ <h1>Tab Group Demo</h1>
1329
</md-tab>
1430
</md-tab-group>
1531

32+
1633
<h1>Async Tabs</h1>
1734

1835
<md-tab-group class="demo-tab-group">

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {NgModule} from '@angular/core';
2+
import {MaterialModule} from '@angular/material';
3+
import {FormsModule} from '@angular/forms';
4+
import {BrowserModule} from '@angular/platform-browser';
5+
import {RouterModule} from '@angular/router';
6+
7+
import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-demo';
8+
9+
@NgModule({
10+
imports: [
11+
FormsModule,
12+
BrowserModule,
13+
MaterialModule,
14+
RouterModule,
15+
],
16+
declarations: [
17+
TabsDemo,
18+
SunnyTabContent,
19+
RainyTabContent,
20+
FoggyTabContent,
21+
]
22+
})
23+
export class TabsDemoModule {}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.demo-nav-bar {
2+
border: 1px solid #e0e0e0;
3+
[md-tab-nav-bar] {
4+
background: #f9f9f9;
5+
}
6+
sunny-routed-content,
7+
rainy-routed-content,
8+
foggy-routed-content {
9+
display: block;
10+
padding: 12px;
11+
}
12+
}
13+
14+
.demo-tab-group {
15+
border: 1px solid #e0e0e0;
16+
.md-tab-header {
17+
background: #f9f9f9;
18+
}
19+
.md-tab-body {
20+
padding: 12px;
21+
}
22+
}

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import {Component, ViewEncapsulation} from '@angular/core';
2+
import {Router} from '@angular/router';
3+
import {Observable} from 'rxjs/Observable';
4+
5+
@Component({
6+
moduleId: module.id,
7+
selector: 'tabs-demo',
8+
templateUrl: 'tabs-demo.html',
9+
styleUrls: ['tabs-demo.css'],
10+
encapsulation: ViewEncapsulation.None,
11+
})
12+
export class TabsDemo {
13+
tabLinks = [
14+
{ label: 'Sun', link: 'sunny-tab'},
15+
{ label: 'Rain', link: 'rainy-tab'},
16+
{ label: 'Fog', link: 'foggy-tab'},
17+
];
18+
activeLinkIndex = 0;
19+
20+
tabs = [
21+
{ label: 'Tab One', content: 'This is the body of the first tab' },
22+
{ label: 'Tab Two', content: 'This is the body of the second tab' },
23+
{ label: 'Tab Three', content: 'This is the body of the third tab' },
24+
];
25+
26+
asyncTabs: Observable<any>;
27+
28+
constructor(private router: Router) {
29+
this.asyncTabs = Observable.create((observer: any) => {
30+
setTimeout(() => {
31+
observer.next(this.tabs);
32+
}, 1000);
33+
});
34+
35+
// Initialize the index by checking if a tab link is contained in the url.
36+
// This is not an ideal check and can be removed if routerLink exposes if it is active.
37+
// https://github.com/angular/angular/pull/12525
38+
this.activeLinkIndex =
39+
this.tabLinks.findIndex(routedTab => router.url.indexOf(routedTab.link) != -1);
40+
}
41+
}
42+
43+
44+
@Component({
45+
moduleId: module.id,
46+
selector: 'sunny-routed-content',
47+
template: 'This is the routed body of the sunny tab.',
48+
})
49+
export class SunnyTabContent {}
50+
51+
52+
@Component({
53+
moduleId: module.id,
54+
selector: 'rainy-routed-content',
55+
template: 'This is the routed body of the rainy tab.',
56+
})
57+
export class RainyTabContent {}
58+
59+
60+
@Component({
61+
moduleId: module.id,
62+
selector: 'foggy-routed-content',
63+
template: 'This is the routed body of the foggy tab.',
64+
})
65+
export class FoggyTabContent {}

‎src/lib/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@ export * from './slider/index';
2020
export * from './slide-toggle/index';
2121
export * from './snack-bar/index';
2222
export * from './tabs/index';
23+
export * from './tabs/tab-nav-bar/index';
2324
export * from './toolbar/index';
2425
export * from './tooltip/index';

0 commit comments

Comments
 (0)