Custom tab bar in ionic - ionic-framework

Question

Hello I am new to ionic and trying to achieve a custom tab bar as follows
Expected Output
Current Output
Bellow is my code so far
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: rgba(255, 255, 255, 0.04);
}
ion-tab-button {
ion-label {
font-weight: 500;
font-size: 14px;
line-height: 10px;
}
opacity: 0.75;
ion-icon {
font-size: 24px;
}
ion-icon[ng-reflect-name='add-circle-outline'] {
font-size: 40px;
}
}
ion-tab-button.tab-selected {
opacity: 1;
ion-label {
font-weight: 600;
}
}
}
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ icon: 'add-circle-outline', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
Can someone please help me achieve as shown in the screenshot

Answer 1

use ion-fab-button to show big button in center.
For Example:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="newspaper"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="construct"></ion-icon>
</ion-tab-button>
<ion-tab-button>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="notifications"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerDirection="root" color="warning" >
<ion-icon name="add-circle"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-tabs>
Check This Stackblitz for more info:
Stackblitz

Answer 2

Your button position is 2 so we will insert a custom class inside It programmatically.
home.html (changed code):
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
[ngClass]="{'add-btn':i===2 ? true : false}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
Then add Its style to scss file :
.add-btn {
ion-icon {
color: #fcad07;
padding: 0px;
margin: 0px;
font-size: 55px !important;
position: absolute;
margin: auto;
}
}

Answer 3

I updated my code as follows and it worked for me
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [src]="item?.src" [name]="item?.icon"></ion-icon>
<ion-label *ngIf="item.src == null">{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ src: 'assets/images/tab-bar-add.svg', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: var(--ion-tab-bar-background);
}
ion-tab-button {
ion-label {
padding-bottom: 5px;
font-weight: 500;
font-size: 14px;
line-height: 10px;
color: var(--ion-color-white-light);
}
ion-icon {
font-size: 24px;
color: var(--ion-color-white-light);
}
ion-icon[ng-reflect-src='assets/images/tab-bar-add.svg'] {
width: 80%;
height: 80%;
}
}
ion-tab-button.tab-selected {
ion-label {
font-weight: 600;
color: var(--ion-color-tab-selected);
}
ion-icon {
color: var(--ion-color-tab-selected);
}
}
}