Skip to content

Commit e721aa7

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #1267 from IgniteUI/rkolev/tabsBottonNavTabsDefinitionMode
Adding Tabs/BottomNav Routing Samples
2 parents 6a93fce + 089d6ca commit e721aa7

11 files changed

+387
-4
lines changed

‎live-editing/configs/TabBarConfigGenerator.ts

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
/* tslint:disable:object-literal-sort-keys */
22
import { Router, RouterModule, Routes } from "@angular/router";
3-
import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule,
4-
IgxIconModule, IgxListModule, IgxRippleModule } from "igniteui-angular";
3+
import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, IgxGridModule,
4+
IgxIconModule, IgxListModule, IgxRippleModule, IgxSelectModule } from "igniteui-angular";
55
import { TabbarSample1Component } from "../../src/app/layouts/tabbar/tabbar-sample-1/tabbar-sample-1.component";
66
import { TabbarSample2Component } from "../../src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component";
7+
import {
8+
BottomNavRoutingView1Component,
9+
BottomNavRoutingView2Component,
10+
BottomNavRoutingView3Component,
11+
TabbarSample3Component } from "../../src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component";
712
import { TabbarComponent } from "../../src/app/layouts/tabbar/tabbar.component";
813
import { AppModuleConfig } from "./core/AppModuleConfig";
914
import { Config } from "./core/Config";
@@ -54,6 +59,33 @@ export class TabBarConfigGenerator implements IConfigGenerator {
5459
shortenComponentPathBy: "/layouts/tabbar/"
5560
}));
5661

62+
// tabbar sample 3
63+
configs.push(new Config({
64+
component: TabbarSample3Component,
65+
appModuleConfig: new AppModuleConfig({
66+
imports: [
67+
Router, RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxGridModule,
68+
IgxSelectModule, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
69+
BottomNavRoutingView3Component
70+
],
71+
ngDeclarations: [
72+
TabbarSample3Component, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
73+
BottomNavRoutingView3Component
74+
],
75+
ngImports: [
76+
IgxBottomNavModule, IgxGridModule, IgxSelectModule,
77+
`
78+
RouterModule.forRoot([
79+
{ path: 'arrivals', component: BottomNavRoutingView1Component },
80+
{ path: 'departures', component: BottomNavRoutingView2Component },
81+
{ path: 'canceled', component: BottomNavRoutingView3Component }
82+
])
83+
`
84+
]
85+
}),
86+
shortenComponentPathBy: "/layouts/tabbar/"
87+
}));
88+
5789
return configs;
5890
}
5991
}

‎live-editing/configs/TabsConfigGenerator.ts

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
/* tslint:disable:object-literal-sort-keys */
2+
3+
import { Router, RouterModule } from "@angular/router";
4+
25
import {
3-
IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule,
4-
IgxNavbarModule, IgxRippleModule, IgxTabsModule
6+
IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxGridModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
7+
IgxSelectModule, IgxTabsModule, IgxToggleModule
58
} from "igniteui-angular";
69

710
import { TabsSample1Component } from "../../src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component";
@@ -15,6 +18,11 @@ import { AppRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/app.
1518
import { TabsSample5Component } from "../../src/app/layouts/tabs/tabs-sample-5/components/tabs-sample-5.component";
1619
import { TabsSample5Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs-sample-5.module";
1720
import { TabsRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs.routing2.module";
21+
import {
22+
TabsRoutingView1Component,
23+
TabsRoutingView2Component,
24+
TabsRoutingView3Component,
25+
TabsSample6Component } from "../../src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component";
1826
import { AppModuleConfig } from "./core/AppModuleConfig";
1927
import { Config } from "./core/Config";
2028
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -102,6 +110,31 @@ export class TabsConfigGenerator implements IConfigGenerator {
102110
shortenComponentPathBy: "/layouts/tabs/"
103111
}));
104112

113+
configs.push(new Config({
114+
component: TabsSample6Component,
115+
appModuleConfig: new AppModuleConfig({
116+
imports: [
117+
Router, RouterModule, TabsSample6Component, IgxGridModule, IgxSelectModule, IgxTabsModule,
118+
TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component
119+
],
120+
ngDeclarations: [
121+
TabsSample6Component, TabsRoutingView1Component, TabsRoutingView2Component,
122+
TabsRoutingView3Component
123+
],
124+
ngImports: [
125+
IgxGridModule, IgxSelectModule, IgxTabsModule,
126+
`
127+
RouterModule.forRoot([
128+
{ path: 'arrivals', component: TabsRoutingView1Component },
129+
{ path: 'departures', component: TabsRoutingView2Component },
130+
{ path: 'canceled', component: TabsRoutingView3Component }
131+
])
132+
`
133+
]
134+
}),
135+
shortenComponentPathBy: "/layouts/tabs/"
136+
}));
137+
105138
return configs;
106139
}
107140
}

‎src/app/layouts/layouts-routes-data.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ export const layoutsRoutesData = {
2020
"tabbar": { displayName: "Bottom Navigation Overview", parentName: "Bottom Navigation" },
2121
"tabbar-sample-1": { displayName: "Bottom Navigation Simple Panels", parentName: "Bottom Navigation" },
2222
"tabbar-sample-2": { displayName: "Bottom Navigation Customizing Panels", parentName: "Bottom Navigation" },
23+
"tabbar-sample-3": { displayName: "Bottom Navigation Routing", parentName: "Bottom Navigation" },
2324
"tabs-sample-1": { displayName: "Tabs Overview", parentName: "Tabs" },
2425
"tabs-sample-2": { displayName: "Tabs Types", parentName: "Tabs" },
2526
"tabs-sample-3": { displayName: "Tabs Customizing", parentName: "Tabs" },
27+
"tabs-sample-6": { displayName: "Tabs Routing", parentName: "Tabs" },
2628
"card-sample-0": { displayName: "Elevated Card", parentName: "Card" },
2729
"card-sample-1": { displayName: "Outlined Card", parentName: "Card" },
2830
"card-sample-2": { displayName: "Horizontal Card", parentName: "Card" },

‎src/app/layouts/layouts-routing.module.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,22 @@ import { LayoutComponent } from "./layout/layout.component";
3030
import { layoutsRoutesData } from "./layouts-routes-data";
3131
import { TabbarSample1Component } from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
3232
import { TabbarSample2Component } from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
33+
import {
34+
BottomNavRoutingView1Component,
35+
BottomNavRoutingView2Component,
36+
BottomNavRoutingView3Component,
37+
TabbarSample3Component } from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
3338
import { TabbarComponent } from "./tabbar/tabbar.component";
3439
import { TabsSample1Component } from "./tabs/tabs-sample-1/tabs-sample-1.component";
3540
import { TabsSample2Component } from "./tabs/tabs-sample-2/tabs-sample-2.component";
3641
import { TabsSample3Component } from "./tabs/tabs-sample-3/tabs-sample-3.component";
3742
import { TabsSample4Component } from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
3843
import { TabsSample5Component } from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
44+
import {
45+
TabsRoutingView1Component,
46+
TabsRoutingView2Component,
47+
TabsRoutingView3Component,
48+
TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
3949

4050
export const layoutsRoutes: Routes = [
4151
{
@@ -157,6 +167,16 @@ export const layoutsRoutes: Routes = [
157167
data: layoutsRoutesData["tabbar-sample-2"],
158168
path: "tabbar-sample-2"
159169
},
170+
{
171+
children: [
172+
{ path: "arrivals", component: BottomNavRoutingView1Component },
173+
{ path: "departures", component: BottomNavRoutingView2Component },
174+
{ path: "canceled", component: BottomNavRoutingView3Component }
175+
],
176+
component: TabbarSample3Component,
177+
data: layoutsRoutesData["tabbar-sample-3"],
178+
path: "tabbar-sample-3"
179+
},
160180
{
161181
component: TabsSample1Component,
162182
data: layoutsRoutesData["tabs-sample-1"],
@@ -180,6 +200,16 @@ export const layoutsRoutes: Routes = [
180200
component: TabsSample5Component,
181201
path: "tabs-sample-5"
182202
},
203+
{
204+
children: [
205+
{ path: "arrivals", component: TabsRoutingView1Component },
206+
{ path: "departures", component: TabsRoutingView2Component },
207+
{ path: "canceled", component: TabsRoutingView3Component }
208+
],
209+
component: TabsSample6Component,
210+
data: layoutsRoutesData["tabs-sample-6"],
211+
path: "tabs-sample-6"
212+
},
183213
{
184214
component: CardComponent,
185215
data: layoutsRoutesData["card-sample-0"],

‎src/app/layouts/layouts.module.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
IgxButtonModule,
88
IgxCardModule,
99
IgxCarouselModule,
10+
IgxCheckboxModule,
1011
IgxDividerModule,
1112
IgxExpansionPanelModule,
1213
IgxGridModule,
@@ -16,7 +17,9 @@ import {
1617
IgxListModule,
1718
IgxNavbarModule,
1819
IgxProgressBarModule,
20+
IgxRadioModule,
1921
IgxRippleModule,
22+
IgxSelectModule,
2023
IgxSliderModule,
2124
IgxTabsModule,
2225
IgxToastModule
@@ -50,18 +53,31 @@ import {LayoutComponent} from "./layout/layout.component";
5053
import {LayoutsRoutingModule} from "./layouts-routing.module";
5154
import {TabbarSample1Component} from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
5255
import {TabbarSample2Component} from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
56+
import {
57+
BottomNavRoutingView1Component,
58+
BottomNavRoutingView2Component,
59+
BottomNavRoutingView3Component,
60+
TabbarSample3Component} from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
5361
import {TabbarComponent} from "./tabbar/tabbar.component";
5462
import {TabsSample1Component} from "./tabs/tabs-sample-1/tabs-sample-1.component";
5563
import {TabsSample2Component} from "./tabs/tabs-sample-2/tabs-sample-2.component";
5664
import {TabsSample3Component} from "./tabs/tabs-sample-3/tabs-sample-3.component";
5765
import {TabsSample4Component} from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
5866
import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
67+
import {
68+
TabsRoutingView1Component,
69+
TabsRoutingView2Component,
70+
TabsRoutingView3Component,
71+
TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
5972

6073
@NgModule({
6174
declarations: [
6275
AvatarSample1Component,
6376
AvatarSample2Component,
6477
AvatarSample3Component,
78+
BottomNavRoutingView1Component,
79+
BottomNavRoutingView2Component,
80+
BottomNavRoutingView3Component,
6581
CardSample1Component,
6682
CardSample2Component,
6783
CardSample3Component,
@@ -87,6 +103,11 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
87103
LayoutComponent,
88104
TabbarSample1Component,
89105
TabbarSample2Component,
106+
TabbarSample3Component,
107+
TabsRoutingView1Component,
108+
TabsRoutingView2Component,
109+
TabsRoutingView3Component,
110+
TabsSample6Component,
90111
TabbarComponent,
91112
TabsSample1Component,
92113
TabsSample2Component,
@@ -106,6 +127,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
106127
IgxButtonModule,
107128
IgxCardModule,
108129
IgxCarouselModule,
130+
IgxCheckboxModule,
109131
IgxDividerModule,
110132
IgxExpansionPanelModule,
111133
IgxGridModule,
@@ -115,7 +137,9 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
115137
IgxListModule,
116138
IgxNavbarModule,
117139
IgxProgressBarModule,
140+
IgxRadioModule,
118141
IgxRippleModule,
142+
IgxSelectModule,
119143
IgxSliderModule,
120144
IgxTabsModule,
121145
IgxToastModule

‎src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
2+
<label igxLabel>URL</label>
3+
<igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
4+
{{ aLocation }}
5+
</igx-select-item>
6+
</igx-select>
7+
8+
<router-outlet></router-outlet>
9+
10+
<igx-bottom-nav>
11+
<igx-tab label="Arrivals" icon="flight_land"
12+
routerLink="arrivals"
13+
routerLinkActive #rla1="routerLinkActive"
14+
[isSelected]="rla1.isActive">
15+
</igx-tab>
16+
17+
<igx-tab label="Departures" icon="flight_takeoff"
18+
routerLink="departures"
19+
routerLinkActive #rla2="routerLinkActive"
20+
[isSelected]="rla2.isActive">
21+
</igx-tab>
22+
23+
<igx-tab label="Canceled" icon="cancel"
24+
routerLink="canceled"
25+
routerLinkActive #rla3="routerLinkActive"
26+
[isSelected]="rla3.isActive">
27+
</igx-tab>
28+
</igx-bottom-nav>

‎src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss

Whitespace-only changes.

‎src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { Component, OnInit } from "@angular/core";
2+
import { Router } from "@angular/router";
3+
import { ISelectionEventArgs } from "igniteui-angular";
4+
5+
@Component({
6+
selector: "app-tabbar-sample-3",
7+
styleUrls: ["tabbar-sample-3.component.scss"],
8+
templateUrl: "tabbar-sample-3.component.html"
9+
})
10+
export class TabbarSample3Component implements OnInit {
11+
public urlLocations = [
12+
"",
13+
"/arrivals",
14+
"/departures",
15+
"/canceled"
16+
];
17+
18+
constructor(private router: Router) { }
19+
20+
public get currentDocumentLocation() {
21+
return document.location.pathname;
22+
}
23+
24+
public ngOnInit() {
25+
const currentAddress: string = document.location.href;
26+
if (currentAddress.indexOf("/samples/layouts") !== -1) {
27+
for (let i = 0; i < this.urlLocations.length; i++) {
28+
this.urlLocations[i] = "/samples/layouts/tabbar-sample-3" + this.urlLocations[i];
29+
}
30+
} else
31+
if (currentAddress.indexOf("/layouts") !== -1) {
32+
for (let i = 0; i < this.urlLocations.length; i++) {
33+
this.urlLocations[i] = "/layouts/tabbar-sample-3" + this.urlLocations[i];
34+
}
35+
}
36+
}
37+
38+
public handleSelection(eventArgs: ISelectionEventArgs): void {
39+
this.router.navigateByUrl(eventArgs.newSelection.value);
40+
}
41+
}
42+
43+
@Component({
44+
template: `
45+
<br>
46+
<igx-grid [data]="data">
47+
<igx-column [field]="'Flight'" width="100"></igx-column>
48+
<igx-column [field]="'From'" width="120"></igx-column>
49+
<igx-column [field]="'Time'" width="100"></igx-column>
50+
<igx-column [field]="'Status'" width="120"></igx-column>
51+
</igx-grid>
52+
`
53+
})
54+
export class BottomNavRoutingView1Component {
55+
public data = [
56+
{ Flight: "LH1702", From: "Munich", Time: "12:25", Status: "Landed"},
57+
{ Flight: "W64332", From: "Dortmund", Time: "12:25", Status: "Expected"},
58+
{ Flight: "W64428", From: "Tel Aviv", Time: "12:40", Status: "Expected"},
59+
{ Flight: "OS795", From: "Vienna", Time: "12:45", Status: "Expected"},
60+
{ Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
61+
];
62+
}
63+
64+
@Component({
65+
template: `
66+
<br>
67+
<igx-grid [data]="data">
68+
<igx-column [field]="'Flight'" width="100"></igx-column>
69+
<igx-column [field]="'From'" width="120"></igx-column>
70+
<igx-column [field]="'Time'" width="100"></igx-column>
71+
<igx-column [field]="'Status'" width="120"></igx-column>
72+
</igx-grid>
73+
`
74+
})
75+
export class BottomNavRoutingView2Component {
76+
public data = [
77+
{ Flight: "SU2061", From: "Moscow", Time: "12:25", Status: "Boarding"},
78+
{ Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Boarding"},
79+
{ Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Taxing"},
80+
{ Flight: "FR6043", From: "Munich", Time: "12:40", Status: "Boarding"},
81+
{ Flight: "W64329", From: "Frankfurt", Time: "12:55", Status: "Expected"},
82+
{ Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
83+
];
84+
}
85+
86+
@Component({
87+
template: `
88+
<br>
89+
<igx-grid [data]="data">
90+
<igx-column [field]="'Flight'" width="100"></igx-column>
91+
<igx-column [field]="'From'" width="120"></igx-column>
92+
<igx-column [field]="'Time'" width="100"></igx-column>
93+
<igx-column [field]="'Status'" width="120"></igx-column>
94+
</igx-grid>
95+
`
96+
})
97+
export class BottomNavRoutingView3Component {
98+
public data = [
99+
{ Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Cancelled"},
100+
{ Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Cancelled"},
101+
{ Flight: "FB437", From: "Frankfurt", Time: "12:45", Status: "Cancelled"}
102+
];
103+
}

0 commit comments

Comments
 (0)