Skip to content

Commit d7ca3a1

Browse files
rmkrmkrmkrmk
committed
adding routing samples for tabs and bottomNav components IgniteUI/igniteui-angular#4297 
1 parent 46c89b5 commit d7ca3a1

9 files changed

+285
-4
lines changed

‎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: "view1", component: BottomNavRoutingView1Component },
173+
{ path: "view2", component: BottomNavRoutingView2Component },
174+
{ path: "view3", 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: "view1", component: TabsRoutingView1Component },
206+
{ path: "view2", component: TabsRoutingView2Component },
207+
{ path: "view3", 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: 22 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,6 +17,7 @@ import {
1617
IgxListModule,
1718
IgxNavbarModule,
1819
IgxProgressBarModule,
20+
IgxRadioModule,
1921
IgxRippleModule,
2022
IgxSliderModule,
2123
IgxTabsModule,
@@ -50,18 +52,31 @@ import {LayoutComponent} from "./layout/layout.component";
5052
import {LayoutsRoutingModule} from "./layouts-routing.module";
5153
import {TabbarSample1Component} from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
5254
import {TabbarSample2Component} from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
55+
import {
56+
BottomNavRoutingView1Component,
57+
BottomNavRoutingView2Component,
58+
BottomNavRoutingView3Component,
59+
TabbarSample3Component} from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
5360
import {TabbarComponent} from "./tabbar/tabbar.component";
5461
import {TabsSample1Component} from "./tabs/tabs-sample-1/tabs-sample-1.component";
5562
import {TabsSample2Component} from "./tabs/tabs-sample-2/tabs-sample-2.component";
5663
import {TabsSample3Component} from "./tabs/tabs-sample-3/tabs-sample-3.component";
5764
import {TabsSample4Component} from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
5865
import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
66+
import {
67+
TabsRoutingView1Component,
68+
TabsRoutingView2Component,
69+
TabsRoutingView3Component,
70+
TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
5971

6072
@NgModule({
6173
declarations: [
6274
AvatarSample1Component,
6375
AvatarSample2Component,
6476
AvatarSample3Component,
77+
BottomNavRoutingView1Component,
78+
BottomNavRoutingView2Component,
79+
BottomNavRoutingView3Component,
6580
CardSample1Component,
6681
CardSample2Component,
6782
CardSample3Component,
@@ -87,6 +102,11 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
87102
LayoutComponent,
88103
TabbarSample1Component,
89104
TabbarSample2Component,
105+
TabbarSample3Component,
106+
TabsRoutingView1Component,
107+
TabsRoutingView2Component,
108+
TabsRoutingView3Component,
109+
TabsSample6Component,
90110
TabbarComponent,
91111
TabsSample1Component,
92112
TabsSample2Component,
@@ -106,6 +126,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
106126
IgxButtonModule,
107127
IgxCardModule,
108128
IgxCarouselModule,
129+
IgxCheckboxModule,
109130
IgxDividerModule,
110131
IgxExpansionPanelModule,
111132
IgxGridModule,
@@ -115,6 +136,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
115136
IgxListModule,
116137
IgxNavbarModule,
117138
IgxProgressBarModule,
139+
IgxRadioModule,
118140
IgxRippleModule,
119141
IgxSliderModule,
120142
IgxTabsModule,

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="addrBar">
2+
URL:
3+
<button igxButton="flat"
4+
[igxToggleAction]="dropdown"
5+
[igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
6+
</div>
7+
<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
8+
<igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
9+
</igx-drop-down>
10+
11+
Presenting several input components:<br>
12+
13+
<router-outlet></router-outlet>
14+
15+
<igx-bottom-nav>
16+
<igx-tab label="Push Buttons" icon="dashboard"
17+
routerLink="view1"
18+
routerLinkActive #rla1="routerLinkActive"
19+
[isSelected]="rla1.isActive">
20+
</igx-tab>
21+
22+
<igx-tab label="Checkbox Buttons" icon="check_circle_outline"
23+
routerLink="view2"
24+
routerLinkActive #rla2="routerLinkActive"
25+
[isSelected]="rla2.isActive">
26+
</igx-tab>
27+
28+
<igx-tab label="Radio Buttons" icon="radio_button_checked"
29+
routerLink="view3"
30+
routerLinkActive #rla3="routerLinkActive"
31+
[isSelected]="rla3.isActive">
32+
</igx-tab>
33+
</igx-bottom-nav>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.addrBar { background: lightgray; padding: 5px; }

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

Lines changed: 77 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,86 @@
11
import { Component } from "@angular/core";
2+
import { ISelectionEventArgs } from "igniteui-angular";
23

34
@Component({
4-
selector: "app-tabbar-sample-3",
5-
styleUrls: ["tabbar-sample-3.component.scss"],
6-
templateUrl: "tabbar-sample-3.component.html"
5+
selector: "app-tabbar-sample-3",
6+
styleUrls: ["tabbar-sample-3.component.scss"],
7+
templateUrl: "tabbar-sample-3.component.html"
78
})
89
export class TabbarSample3Component {
10+
public urlLocations = [
11+
{ label: "View 1", url: "view1" },
12+
{ label: "View 2", url: "view2" },
13+
{ label: "View 3", url: "view3" }
14+
];
915

10-
constructor() {
16+
constructor() { }
17+
18+
public get currentDocumentLocation() {
19+
return document.location.href;
20+
}
21+
22+
public onDropDownSelection(eventArgs: ISelectionEventArgs) {
23+
const currentAddress: string = document.location.href;
24+
let baseAddress: string;
25+
if (currentAddress.indexOf("samples") !== -1) {
26+
baseAddress = "/samples/layouts/tabbar-sample-3/";
27+
} else {
28+
baseAddress = "/layouts/tabbar-sample-3/";
29+
}
30+
document.location.href = baseAddress + eventArgs.newSelection.value;
1131
}
32+
}
33+
34+
@Component({
35+
styles: [
36+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
37+
],
38+
template: `
39+
Push Buttons
40+
<div style="display: flex; justify-content: space-around; align-items: center; ">
41+
<button igxButton="flat" igxRipple>Flat</button> <br>
42+
<button igxButton="raised" igxRipple>Raised</button> <br>
43+
<button igxButton="outlined" igxRipple>Outlined</button> <br>
44+
<button igxButton="icon" igxRipple>
45+
<igx-icon fontSet="material">favorite</igx-icon>
46+
</button> <br>
47+
<button igxButton="fab" igxRipple>
48+
<igx-icon fontSet="material">favorite</igx-icon>
49+
</button>
50+
</div>
51+
`
52+
})
53+
export class BottomNavRoutingView1Component {
54+
}
1255

56+
@Component({
57+
styles: [
58+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
59+
"igx-checkbox { margin-top: 16px; }"
60+
],
61+
template: `
62+
Checkbox Buttons
63+
<igx-checkbox [checked]="true">Research</igx-checkbox>
64+
<igx-checkbox [checked]="true">Design</igx-checkbox>
65+
<igx-checkbox [checked]="false">Implement</igx-checkbox>
66+
<igx-checkbox [checked]="false">Test</igx-checkbox>
67+
<igx-checkbox [checked]="false">Integrate</igx-checkbox>
68+
`
69+
})
70+
export class BottomNavRoutingView2Component {
71+
}
72+
73+
@Component({
74+
styles: [
75+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
76+
"igx-radio { margin-top: 16px; }"
77+
],
78+
template: `
79+
Radio Buttons
80+
<igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
81+
`
82+
})
83+
export class BottomNavRoutingView3Component {
84+
public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
85+
public selectedFood: string = this.foods[2];
1386
}

‎src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="addrBar">
2+
URL:
3+
<button igxButton="flat"
4+
[igxToggleAction]="dropdown"
5+
[igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
6+
</div>
7+
<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
8+
<igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
9+
</igx-drop-down>
10+
11+
Presenting several input components<br>
12+
13+
<igx-tabs>
14+
<igx-tab-item label="Push Buttons" icon="dashboard"
15+
routerLink="view1"
16+
routerLinkActive #rla1="routerLinkActive"
17+
[isSelected]="rla1.isActive">
18+
</igx-tab-item>
19+
20+
<igx-tab-item label="Checkbox Buttons" icon="check_circle_outline"
21+
routerLink="view2"
22+
routerLinkActive #rla2="routerLinkActive"
23+
[isSelected]="rla2.isActive">
24+
</igx-tab-item>
25+
26+
<igx-tab-item label="Radio Buttons" icon="radio_button_checked"
27+
routerLink="view3"
28+
routerLinkActive #rla3="routerLinkActive"
29+
[isSelected]="rla3.isActive">
30+
</igx-tab-item>
31+
</igx-tabs>
32+
33+
<router-outlet></router-outlet>

‎src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.addrBar { background: lightgray; padding: 5px; }

‎src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Component } from "@angular/core";
2+
import { ISelectionEventArgs } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "app-tabs-sample-6",
6+
styleUrls: ["./tabs-sample-6.component.scss"],
7+
templateUrl: "./tabs-sample-6.component.html"
8+
})
9+
export class TabsSample6Component {
10+
public urlLocations = [
11+
{ label: "View 1", url: "view1" },
12+
{ label: "View 2", url: "view2" },
13+
{ label: "View 3", url: "view3" }
14+
];
15+
16+
constructor() { }
17+
18+
public get currentDocumentLocation() {
19+
return document.location.href;
20+
}
21+
22+
public onDropDownSelection(eventArgs: ISelectionEventArgs) {
23+
const currentAddress: string = document.location.href;
24+
let baseAddress: string;
25+
if (currentAddress.indexOf("samples") !== -1) {
26+
baseAddress = "/samples/layouts/tabs-sample-6/";
27+
} else {
28+
baseAddress = "/layouts/tabs-sample-6/";
29+
}
30+
document.location.href = baseAddress + eventArgs.newSelection.value;
31+
}
32+
}
33+
34+
@Component({
35+
styles: [
36+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
37+
],
38+
template: `
39+
Push Buttons
40+
<div style="display: flex; justify-content: space-around; align-items: center; ">
41+
<button igxButton="flat" igxRipple>Flat</button> <br>
42+
<button igxButton="raised" igxRipple>Raised</button> <br>
43+
<button igxButton="outlined" igxRipple>Outlined</button> <br>
44+
<button igxButton="icon" igxRipple>
45+
<igx-icon fontSet="material">favorite</igx-icon>
46+
</button> <br>
47+
<button igxButton="fab" igxRipple>
48+
<igx-icon fontSet="material">favorite</igx-icon>
49+
</button>
50+
</div>
51+
`
52+
})
53+
export class TabsRoutingView1Component {
54+
}
55+
56+
@Component({
57+
styles: [
58+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
59+
"igx-checkbox { margin-top: 16px; }"
60+
],
61+
template: `
62+
Checkbox Buttons
63+
<igx-checkbox [checked]="true">Research</igx-checkbox>
64+
<igx-checkbox [checked]="true">Design</igx-checkbox>
65+
<igx-checkbox [checked]="false">Implement</igx-checkbox>
66+
<igx-checkbox [checked]="false">Test</igx-checkbox>
67+
<igx-checkbox [checked]="false">Integrate</igx-checkbox>
68+
`
69+
})
70+
export class TabsRoutingView2Component {
71+
}
72+
73+
@Component({
74+
styles: [
75+
":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
76+
"igx-radio { margin-top: 16px; }"
77+
],
78+
template: `
79+
Radio Buttons
80+
<igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
81+
`
82+
})
83+
export class TabsRoutingView3Component {
84+
public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
85+
public selectedFood: string = this.foods[2];
86+
}

0 commit comments

Comments
 (0)