ion-tab-bar
The tab bar is a UI component that contains a set of
Usage
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
CopyCopied
<ion-tabs>
<!-- Tab views -->
<ion-tab tab="account"></ion-tab>
<ion-tab tab="contact"></ion-tab>
<ion-tab tab="settings"></ion-tab>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
CopyCopied
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
import { call, person, settings } from 'ionicons/icons';
export const TabBarExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}
<IonTabBar slot="bottom">
<IonTabButton tab="account">
<IonIcon icon={person} />
</IonTabButton>
<IonTabButton tab="contact">
<IonIcon icon={call} />
</IonTabButton>
<IonTabButton tab="settings">
<IonIcon icon={settings} />
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonContent>
);
CopyCopied
import { Component, h } from '@stencil/core';
@Component({
tag: 'tab-bar-example',
styleUrl: 'tab-bar-example.css'
})
export class TabBarExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="account" component="page-account"></ion-tab>
<ion-tab tab="contact" component="page-contact"></ion-tab>
<ion-tab tab="settings" component="page-settings"></ion-tab>
{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
];
}
}
CopyCopied
<template>
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon :icon="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon :icon="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon :icon="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
import { call, person, settings } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
setup() {
return { call, person, settings }
}
});
</script>
CopyCopied
Properties
color | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
selectedTab | |
Description | The selected tab component |
Attribute | selected-tab |
Type | string | undefined |
translucent | |
Description | If |
Attribute | translucent |
Type | boolean |
Default | false |
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the tab bar |
--border | Border of the tab bar |
--color | Color of the tab bar |