Hi there,
I would like to customize my ionic tabs menu like the one in the image below. I am using ionic2. Any idea how?
You want to achieve Tab view or the + icon view (as a floating icon) or both ?
I want to achieve a tab view like that, I would prefer not using a floating button on top of a ion-tabs
Refer below link:
You can have
Text Tabs
Icon Tabs
Text and Icon Tabs
Badge Tabs
I hope this will help you.
I have already referred to them, the problem is that I need the icon to be bigger than the Tab View
Hey, I would like to know if you did it? and how?
Did you achieve that? I need acchieve somthing like that too.Plz share if you. Thanks
You can try with something like this
<ion-tabs>
<ion-tab label="" icon="home" href="/tabs/(home:home)">
<ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab label="" icon="warning" href="/tabs/(about:about)">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab></ion-tab>
<ion-tab label="" icon="pin" href="/tabs/(contact:contact)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
<ion-tab label="" icon="person" href="/tabs/(contact:contact)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
Keep in mind, this is for Ionic v4
8 Likes
Cool, sorry can i ask something? The plus button in the center work just fine, but the rest of the icon tabs doesn’t show…
I did your method but how to navigate that plus button to the page which is belong to tabs page itself?
Assign a click event to the button to navigate to the page
This work perfectly but i have an issue.
When keyboard appear in one of the page in the tabs, the fab is still above the keyboard and the rest of the tabs is behind, so how can we let the fab behind like the rest of the tabs ?
Do you have an idea ?
2 Likes
Your post got entire pregnancy and nobody answered. So bad! I need the same help =\ I tried using keyboard plugin, but it has a delay and something it got confused by the time to hide or to show the custom center button.
I achieved this doing the following:
note: I’m using Ionic v4.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="home-outline"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="costs">
<ion-icon name="list-outline"></ion-icon>
<ion-label>Expenses</ion-label>
</ion-tab-button>
<ion-tab-button></ion-tab-button>
<ion-tab-button tab="debts">
<ion-icon name="cash-outline"></ion-icon>
<ion-label>Debts</ion-label>
</ion-tab-button>
<ion-tab-button tab="investments">
<ion-icon name="pie-chart-outline"></ion-icon>
<ion-label>Investments</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed" edge="false">
<ion-fab-button type="button">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button type="button" color="dark"><ion-icon name="list-outline"></ion-icon>></ion-fab-button>
<ion-fab-button type="button" color="dark"><ion-icon name="pie-chart-outline"></ion-icon></ion-fab-button>
<ion-fab-button type="button" color="dark"><ion-icon name="cash-outline"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
This renders the following tab bar:
Hopes this helps.
Regards,
Brian
3 Likes
Do the following steps (i recommend you to practice this in a blank new project)
npm install --save @fivethree/core @angular/animations
Once the packages are installed, import BrowserAnimationsModule in app.module.ts :
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
...
BrowserAnimationsModule,
...
]
})
export class AppModule {}
After that in your home module.ts file
Import FivAppBarModule into the page or component:
import { NgModule } from '@angular/core';
`import { FivAppBarModule } from '@fivethree/core';`
@NgModule({
imports: [
...
FivAppBarModule,
...
]
})
export class TabsPageModule {
in your home.html file add these lines
<ion-tabs #tabs>
<fiv-app-bar slot="bottom" [titleMode]="titleMode" #bar>
<fiv-fab [fivAppBarFab]="position" #fab>
<fiv-icon name="color-wand"></fiv-icon>
</fiv-fab>
<fiv-app-bar-tab left tab="tab1" href="/tab1">
<fiv-icon name="md-home"></fiv-icon>
<ion-label>Home</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab left tab="tab2" href="/tab2">
<fiv-icon name="md-images"></fiv-icon>
<ion-label>Images</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab3" href="/tab3">
<fiv-icon [badge]="1" name="md-pizza"></fiv-icon>
<ion-label>Pizza</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab4" href="/tab4" icon="md-more">
<fiv-icon name="md-more"></fiv-icon>
<ion-label>More</ion-label>
</fiv-app-bar-tab>
</fiv-app-bar>
</ion-tabs>
in home.ts file add this
export class HomePage implements OnInit {
titleMode = 'hide';
position = 'center';
}
that’s it now you will the the beautiful bottom tab bar as you want 
🏻
- use can also do this all by css
i tried this and im getting this error.
Can't bind to 'titleMode' since it isn't a known property of 'fiv-app-bar'.
1. If 'fiv-app-bar' is an Angular component and it has 'titleMode' input, then verify that it is part of this module.
2. If 'fiv-app-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ion-footer>
<ion-tabs #tabs>
<fiv-app-bar slot="bottom" [ERROR ->][titleMode]="titleMode" #bar>
<fiv-fab [fivAppBarFab]="position" #fab>
<fiv-icon name=""): ng:///HomePageModule/HomePage.html@17:31
'fiv-icon' is not a known element:
how would you do this by using only CSS?
Its super but i also get same above error fiv-icon’ is not a known element:
Icons are not visible but bar are working i test with ionic icons pack but still not show i think its too old and no longer support in ionic 5 if any one succes plz reply to me how to solve fiv-icon’ is not a known element: error