Tab
ion-tab
ion-tab
The Tab component, written <ion-tab>
, is styled based on the mode and should
be used in conjunction with the Tabs component.
Each ion-tab
is a declarative component for a NavController.
Basically, each tab is a NavController
. 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.
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 (ionSelect)
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>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
Input Properties
Attr | Type | Details |
---|---|---|
enabled | boolean |
If true, enable the tab. If false,
the user cannot interact with this element.
Default: |
root | Page |
Set the root page for this tab. |
rootParams | object |
Any nav-params to pass to the root page of this tab. |
show | boolean |
If true, the tab button is visible within the
tabbar. Default: |
swipeBackEnabled | boolean |
If true, swipe to go back is enabled. |
tabBadge | string |
The badge for the tab button. |
tabBadgeStyle | string |
The badge color for the tab button. |
tabIcon | string |
The icon for the tab button. |
tabTitle | string |
The title of the tab button. |
tabUrlPath | string |
The URL path name to represent this tab within the URL. |
tabsHideOnSubPages | boolean |
If true, hide the tabs on child pages. |
Output Events
Attr | Details |
---|---|
ionSelect | Emitted when the current tab is selected. |
Sass Variables
Property | Default | Description |
---|---|---|
$tabs-ios-border |
$hairlines-width solid $tabs-ios-border-color |
Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) |
$tabs-ios-tab-padding |
0 2px |
Padding on the tab button |
$tabs-ios-tab-max-width |
240px |
Max width of the tab button |
$tabs-ios-tab-min-height |
49px |
Minimum height of the tab button |
$tabs-ios-tab-text-color |
$tabs-ios-tab-color-inactive |
Text color of the inactive tab button |
$tabs-ios-tab-text-color-active |
$tabs-ios-tab-color-active |
Text color of the active tab button |
$tabs-ios-tab-icon-color |
$tabs-ios-tab-color-inactive |
Icon color of the inactive tab button |
$tabs-ios-tab-icon-color-active |
$tabs-ios-tab-color-active |
Icon color of the active tab button |
$tabs-ios-tab-font-size |
10px |
Font size of the tab button text |
$tabs-ios-tab-icon-size |
30px |
Size of the tab button icon |
Property | Default | Description |
---|---|---|
$tabs-md-tab-padding |
0 |
Padding on the tab button |
$tabs-md-tab-min-height |
5.6rem |
Minimum height of the tab button |
$tabs-md-tab-font-size |
1.2rem |
Font size of the inactive tab button text |
$tabs-md-tab-font-weight |
normal |
Font weight of the tab button text |
$tabs-md-tab-opacity |
.7 |
Opacity of the inactive tab button |
$tabs-md-tab-text-color |
rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) |
Text color of the inactive tab button |
$tabs-md-tab-text-color-active |
$tabs-md-tab-color-active |
Text color of the active tab button |
$tabs-md-tab-icon-color |
rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) |
Icon color of the inactive tab button |
$tabs-md-tab-icon-color-active |
$tabs-md-tab-color-active |
Icon color of the active tab button |
$tabs-md-tab-padding-active |
0 |
Padding of the active tab button |
$tabs-md-tab-font-size-active |
1.4rem |
Font size of the active tab button text |
$tabs-md-tab-text-margin |
0 |
Margin on the tab button text |
$tabs-md-tab-text-capitalization |
none |
Capitalization of the tab button text |
$tabs-md-tab-text-transform-origin |
50% 80% |
Transform origin for the tab button text |
$tabs-md-tab-text-transform-active |
scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) |
Transform for the active tab button text |
$tabs-md-tab-text-transition |
transform .3s ease-in-out |
Text transition for the tab button text |
$tabs-md-tab-icon-transform-active |
translate3d(0, -2px, 0) |
Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only |
$tabs-md-tab-icon-right-transform-active |
translate3d(2px, 0, 0) |
Transform for the active tab button icon when the layout is icon-right |
$tabs-md-tab-icon-bottom-transform-active |
translate3d(0, 2px, 0) |
Transform for the active tab button icon when the layout is icon-bottom |
$tabs-md-tab-icon-left-transform-active |
translate3d(-2px, 0, 0) |
Transform for the active tab button icon when the layout is icon-left |
$tabs-md-tab-icon-transform-origin |
50% 150% |
Transform origin for the tab button text |
$tabs-md-tab-icon-transition |
transform .3s ease-in-out |
Text transition for the tab button icon |
$tabs-md-tab-icon-size |
2.4rem |
Size of the tab button icon |
Property | Default | Description |
---|---|---|
$tabs-wp-tab-padding |
12px 10px 5px 10px |
Padding on the tab button |
$tabs-wp-tab-min-height |
4.8rem |
Minimum height of the tab button |
$tabs-wp-tab-font-size |
1.2rem |
Font size of the tab button text |
$tabs-wp-tab-font-weight |
normal |
Font weight of the tab button text |
$tabs-wp-tab-opacity |
.7 |
Opacity of the inactive tab button |
$tabs-wp-tab-color |
rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) |
Text color of the inactive tab button |
$tabs-wp-tab-color-active |
$tabs-wp-tab-color-active |
Text color of the active tab button |
$tabs-wp-tab-icon-color |
rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) |
Icon color of the inactive tab button |
$tabs-wp-tab-icon-color-active |
$tabs-wp-tab-color-active |
Icon color of the active tab button |
$tabs-wp-tab-border |
2px solid $tabs-wp-border-color |
Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) |
$tabs-wp-tab-border-color-active |
$tabs-wp-tab-color-active |
Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) |
$tabs-wp-tab-background-activated |
rgba(0, 0, 0, .1) |
Background of the tab button when pressed |
$tabs-wp-tab-icon-size |
2.4rem |
Size of the tab button icon |
Related
Tabs Component Docs, Tabs API Docs, Nav API Docs, NavController API Docs