Tab
The Tab component, written <ion-tab>
, is styled based on the mode and should
be used in conjunction with the Tabs component.
Each tab has a separate navigation controller. For more information on using navigation controllers take a look at the NavController API Docs.
See the Tabs API Docs for more details on configuring Tabs.
Component
selector: ion-tab
Usage
To add a basic tab, you can use the following markup where the root
property
is the page you want to load for that tab, tabTitle
is the optional text to
display on the tab, and tabIcon
is the optional icon.
<ion-tabs>
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>
</ion-tabs>
Then, in your class you can set chatRoot
to an imported class:
import {ChatPage} from '../chat/chat';
export class Tabs {
// here we'll set the property of chatRoot to
// the imported class of ChatPage
chatRoot = ChatPage;
constructor() {
}
}
You can also pass some parameters to the root page of the tab through
rootParams
. Below we pass chatParams
to the Chat tab:
<ion-tabs>
<ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"><ion-tab>
</ion-tabs>
export class Tabs {
chatRoot = ChatPage;
// set some user information on chatParams
chatParams = {
user1: "admin",
user2: "ionic"
};
constructor() {
}
}
And in ChatPage
you can get the data from NavParams
:
export class ChatPage {
constructor(navParams: NavParams) {
console.log("Passed params", navParams.data);
}
}
Sometimes you may want to call a method instead of navigating to a new
page. You can use the (select)
event to call a method on your class when
the tab is selected. Below is an example of presenting a modal from one of
the tabs.
<ion-tabs preloadTabs="false">
<ion-tab (select)="chat()"></ion-tab>
</ion-tabs>
export class Tabs {
constructor(nav: NavController) {
this.nav = nav;
}
chat() {
let modal = Modal.create(ChatPage);
this.nav.present(modal);
}
}
Input Properties
Attr | Type | Details |
---|---|---|
root | Page |
Set the root page for this tab. |
rootParams | object |
Any nav-params to pass to the root page of this tab. |
tabTitle | string |
The title of the tab button. |
tabIcon | string |
The icon for the tab button. |
tabBadge | string |
The badge for the tab button. |
tabBadgeStyle | string |
The badge color for the tab button. |
enabled | boolean |
If the tab is enabled or not. If the tab
is not enabled then the tab button will still show, however,
the button will appear grayed out and will not be clickable.
Defaults to |
show | boolean |
If the tab button is visible within the
tabbar or not. Defaults to |
Output Events
Attr | Details |
---|---|
select | Method to call when the current tab is selected |
Related
Tabs Component Docs, Tabs API Docs, Nav API Docs, NavController API Docs