Issue
Hello I am new to ionic and trying to achieve a custom tab bar as follows
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
Solution
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);
}
}
}
Answered By - Khadija Daruwala
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.