ion-tab-button
A tab button is a UI component that is placed inside of a tab bar. The tab button can specify the layout of the icon and label and connect to a tab view.
See the tabs documentation for more details on configuring tabs.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-tabs>
<!-- Tab views -->
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>
<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
export const TabButtonExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />
<IonLabel>Schedule</IonLabel>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon icon={personCircle} />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon icon={informationCircle} />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'tab-button-example',
styleUrl: 'tab-button-example.css',
})
export class TabButtonExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>
<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>,
];
}
}
<template>
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/tabs/schedule">
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/tabs/speakers">
<ion-icon :icon="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/tabs/map">
<ion-icon :icon="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/tabs/about">
<ion-icon :icon="informationCircle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs,
},
setup() {
return { calendar, informationCircle, map, personCircle };
},
});
</script>
Properties
disabled
Description | If true , the user cannot interact with the tab button. |
Attribute | disabled |
Type | boolean |
Default | false |
download
Description | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). |
Attribute | download |
Type | string | undefined |
Default | undefined |
href
Description | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
Attribute | href |
Type | string | undefined |
Default | undefined |
layout
Description | Set the layout of the text and icon in the tab bar. It defaults to 'icon-top' . |
Attribute | layout |
Type | "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
rel
Description | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. |
Attribute | rel |
Type | string | undefined |
Default | undefined |
selected
Description | The selected tab component |
Attribute | selected |
Type | boolean |
Default | false |
tab
Description | A tab id must be provided for each ion-tab . It's used internally to reference the selected tab or by the router to switch between them. |
Attribute | tab |
Type | string | undefined |
Default | undefined |
target
Description | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank" , "_self" , "_parent" , "_top" . |
Attribute | target |
Type | string | undefined |
Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
Name | Description |
---|---|
native | The native HTML anchor element that wraps all child elements. |
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the tab button |
--background-focused | Background of the tab button when focused with the tab key |
--background-focused-opacity | Opacity of the tab button background when focused with the tab key |
--color | Color of the tab button |
--color-focused | Color of the tab button when focused with the tab key |
--color-selected | Color of the selected tab button |
--padding-bottom | Bottom padding of the tab button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
--padding-top | Top padding of the tab button |
--ripple-color | Color of the button ripple effect |
Slots
No slots available for this component.