Skip to content
This repository was archived by the owner on Nov 30, 2022. It is now read-only.

Commit f30ee98

Browse files
garygrossgartengarygrossgarten
committed
fix(app-bar): fix appbar to work with new ion-tabs layout
1 parent db5d1a3 commit f30ee98

File tree

7 files changed

+110
-27
lines changed

7 files changed

+110
-27
lines changed

‎projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Component, OnInit, Input, HostBinding } from '@angular/core';
1+
import { AppBarComponent } from './../app-bar/app-bar.component';
2+
import { Component, OnInit, Input, HostBinding, Output, EventEmitter, Host } from '@angular/core';
23
import { NavController } from '@ionic/angular';
34
import { AppBarTitleLayout } from '../interfaces';
5+
import { TabButtonClickDetail } from '@ionic/core';
46

57
@Component({
68
selector: 'fiv-app-bar-tab-content',
@@ -11,20 +13,31 @@ export class AppBarTabContentComponent implements OnInit {
1113

1214
@Input() name: string;
1315
@Input() icon: string;
16+
@Input() tab: string;
1417
@Input() href: string;
1518
@Input() active = false;
1619
@Input() titleLayout: AppBarTitleLayout = 'hide';
1720

21+
private selected = false;
22+
1823
@HostBinding('class') get classes(): string {
1924
return `label-${this.titleLayout}`;
2025
}
2126

22-
constructor(private nav: NavController) { }
27+
@Output() ionTabButtonClick = new EventEmitter<TabButtonClickDetail>();
28+
29+
constructor(private nav: NavController, @Host() private appbar: AppBarComponent) { }
2330

2431
ngOnInit() {
32+
2533
}
2634

2735
onClick() {
28-
this.nav.navigateRoot(this.href);
36+
// this.nav.navigateRoot(this.href);
37+
this.ionTabButtonClick.emit({
38+
tab: this.tab,
39+
href: this.href,
40+
selected: true
41+
});
2942
}
3043
}

‎projects/core/src/lib/app-bar-tab/app-bar-tab.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export class AppBarTabComponent implements OnInit {
99

1010
@Input() name: string;
1111
@Input() icon: string;
12+
@Input() tab: string;
1213
@Input() href: string;
1314

1415
constructor() { }

‎projects/core/src/lib/app-bar/app-bar.component.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<div class="appbar" [ngClass]="{'cutout': cutoutVisible, 'left': left, 'right': right}">
22
<div class="appbar-rect left">
33
<div class="tabs">
4-
<fiv-app-bar-tab-content [active]="tab.href === router.url" [href]="tab.href" [name]="tab.name" [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
4+
<fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)" [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
5+
[icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
56
</div>
67
</div>
78
<fiv-loading-fab (fivHidden)="onFabHidden()" [icon]="icon" [visible]="_fabVisible" #fab (click)="fabClick()"></fiv-loading-fab>
89
<div class="rect"></div>
910
<div class="appbar-rect right">
1011
<div class="tabs">
11-
<fiv-app-bar-tab-content [active]="tab.href === router.url" [href]="tab.href" [name]="tab.name" [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
12+
<fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)" [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
13+
[icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
1214
</div>
1315
</div>
1416
</div>

‎projects/core/src/lib/app-bar/app-bar.component.ts

+12-5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
import { AppBarTabComponent } from '../app-bar-tab/app-bar-tab.component';
1313
import { Router } from '@angular/router';
1414
import { AppBarTitleLayout, AppBarFabPosition } from '../interfaces';
15+
import { IonTabs } from '@ionic/angular';
16+
import { TabButtonClickDetail } from '@ionic/core';
1517

1618
@Component({
1719
selector: 'fiv-app-bar',
@@ -31,10 +33,11 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
3133

3234
@ViewChild('fab') fab: LoadingFabComponent;
3335
@Input() icon = 'md-add';
36+
@Input() tabs: IonTabs;
3437
@Input() titleLayout: AppBarTitleLayout = 'hide';
3538
@Output() fivFabClick = new EventEmitter<AppBarComponent>();
3639

37-
@ContentChildren(AppBarTabComponent) tabs: QueryList<AppBarTabComponent>;
40+
@ContentChildren(AppBarTabComponent) tabComponents: QueryList<AppBarTabComponent>;
3841

3942
@Input()
4043
set position(position: AppBarFabPosition) {
@@ -118,14 +121,14 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
118121

119122
private prepareTabs(position: AppBarFabPosition) {
120123
if (position === 'center') {
121-
this.tabsLeft = this.tabs.toArray().slice(0, 2);
122-
this.tabsRight = this.tabs.toArray().slice(2, 4);
124+
this.tabsLeft = this.tabComponents.toArray().slice(0, 2);
125+
this.tabsRight = this.tabComponents.toArray().slice(2, 4);
123126
} else if (position === 'right') {
124-
this.tabsLeft = this.tabs.toArray();
127+
this.tabsLeft = this.tabComponents.toArray();
125128
this.tabsRight = [];
126129
} else if (position === 'left') {
127130
this.tabsLeft = [];
128-
this.tabsRight = this.tabs.toArray();
131+
this.tabsRight = this.tabComponents.toArray();
129132
}
130133
}
131134

@@ -145,4 +148,8 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
145148
fabClick() {
146149
this.fivFabClick.emit(this);
147150
}
151+
152+
ionTabButtonClick(event: TabButtonClickDetail) {
153+
this.tabs.onTabButtonClick(event);
154+
}
148155
}

‎src/app/pages/app-bar/app-bar.module.ts

+3-10
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,22 @@ import { ComponentsModule } from '@components/components.module';
22
import { NgModule } from '@angular/core';
33
import { CommonModule } from '@angular/common';
44
import { FormsModule } from '@angular/forms';
5-
import { Routes, RouterModule } from '@angular/router';
65

76
import { IonicModule } from '@ionic/angular';
87

98
import { AppBarPage } from './app-bar.page';
109
import { FivethreeCoreModule } from 'core';
11-
12-
const routes: Routes = [
13-
{
14-
path: '',
15-
component: AppBarPage
16-
}
17-
];
10+
import { TabsPageRoutingModule } from './tabs.router.module';
1811

1912
@NgModule({
2013
imports: [
2114
CommonModule,
2215
FormsModule,
2316
IonicModule,
2417
FivethreeCoreModule,
25-
RouterModule.forChild(routes),
18+
TabsPageRoutingModule,
2619
ComponentsModule
2720
],
2821
declarations: [AppBarPage]
2922
})
30-
export class AppBarPageModule {}
23+
export class AppBarPageModule { }

‎src/app/pages/app-bar/app-bar.page.html

+9-7
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,25 @@
3232

3333
</div>
3434

35-
<ion-tabs>
36-
<fiv-app-bar (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom" [titleLayout]="titleLayout"
35+
<ion-tabs #tabs>
36+
<fiv-app-bar [tabs]="tabs" (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom" [titleLayout]="titleLayout"
3737
#bar [position]="position" [fabVisible]="fabVisible" [icon]="icon">
38-
<fiv-app-bar-tab left href="/app-bar" icon="md-home" name="App Bar">
38+
<fiv-app-bar-tab left tab="tab1" href="/tab1" icon="md-home" name="App Bar">
3939
</fiv-app-bar-tab>
40-
<fiv-app-bar-tab left href="/expandable" icon="md-resize" name="Expandable">
40+
<fiv-app-bar-tab left tab="tab2" href="/tab2" icon="md-resize" name="Expandable">
4141
</fiv-app-bar-tab>
42-
<fiv-app-bar-tab right href="/password" icon="md-eye" name="Password">
42+
<fiv-app-bar-tab right tab="tab3" href="/tab3" icon="md-eye" name="Password">
4343
</fiv-app-bar-tab>
44-
<fiv-app-bar-tab right href="/buttons" icon="md-more" name="Buttons">
44+
<fiv-app-bar-tab right tab="tab4" href="/tab4" icon="md-more" name="Buttons">
4545
</fiv-app-bar-tab>
4646
</fiv-app-bar>
4747
</ion-tabs>
48+
49+
4850
</app-example>
4951
</ion-col>
5052
</ion-row>
5153
</ion-grid>
5254

5355
<app-footer></app-footer>
54-
</ion-content>
56+
</ion-content>

‎src/app/pages/app-bar/tabs.router.module.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { AppBarPage } from './app-bar.page';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule, Routes } from '@angular/router';
4+
5+
6+
const routes: Routes = [
7+
{
8+
path: 'tabs',
9+
component: AppBarPage,
10+
children: [
11+
{
12+
path: 'tab1',
13+
children: [
14+
{
15+
path: '',
16+
loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
17+
}
18+
]
19+
},
20+
{
21+
path: 'tab2',
22+
children: [
23+
{
24+
path: '',
25+
loadChildren: '../buttons/buttons.module#ButtonsPageModule'
26+
}
27+
]
28+
},
29+
{
30+
path: 'tab3',
31+
children: [
32+
{
33+
path: '',
34+
loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
35+
}
36+
]
37+
},
38+
{
39+
path: 'tab4',
40+
children: [
41+
{
42+
path: '',
43+
loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
44+
}
45+
]
46+
},
47+
{
48+
path: '',
49+
redirectTo: '/app-bar/tabs/tab1',
50+
pathMatch: 'full',
51+
},
52+
]
53+
},
54+
{
55+
path: '',
56+
redirectTo: '/app-bar/tabs/tab1',
57+
pathMatch: 'full'
58+
}
59+
];
60+
61+
@NgModule({
62+
imports: [RouterModule.forChild(routes)],
63+
exports: [RouterModule]
64+
})
65+
export class TabsPageRoutingModule { }

0 commit comments

Comments
 (0)