ion-tab-button

<ion-tabs>
<!-- Tab bar -->
<ion-tab-barslot="bottom">
<ion-tab-buttontab="schedule">
<ion-iconname="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-buttontab="speakers">
<ion-iconname="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-buttontab="map">
<ion-iconname="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-buttontab="about">
<ion-iconname="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

<ion-tabs>
<!-- Tab views -->
<ion-tabtab="schedule">
<ion-router-outletname="schedule"></ion-router-outlet>
</ion-tab>

<ion-tabtab="speakers">
<ion-router-outletname="speakers"></ion-router-outlet>
</ion-tab>

<ion-tabtab="map">
<ion-router-outletname="map"></ion-router-outlet>
</ion-tab>

<ion-tabtab="about">
<ion-router-outletname="about"></ion-router-outlet>
</ion-tab>

<!-- Tab bar -->
<ion-tab-barslot="bottom">
<ion-tab-buttontab="schedule"href="/app/tabs/(schedule:schedule)">
<ion-iconname="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-buttontab="speakers"href="/app/tabs/(speakers:speakers)">
<ion-iconname="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-buttontab="map"href="/app/tabs/(map:map)">
<ion-iconname="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-buttontab="about"href="/app/tabs/(about:about)">
<ion-iconname="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

importReactfrom'react';
import{IonTabs,IonTabBar,IonTabButton,IonIcon,IonLabel,IonContent}from'@ionic/react';
import{ calendar, personCircle, map, informationCircle }from'ionicons/icons';

exportconstTabButtonExample:React.FC=()=>(
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}
<IonTabBarslot="bottom">
<IonTabButtontab="schedule">
<IonIconicon={calendar}/>
<IonLabel>Schedule</IonLabel>
</IonTabButton>

<IonTabButtontab="speakers">
<IonIconicon={personCircle}/>
<IonLabel>Speakers</IonLabel>
</IonTabButton>

<IonTabButtontab="map">
<IonIconicon={map}/>
<IonLabel>Map</IonLabel>
</IonTabButton>

<IonTabButtontab="about">
<IonIconicon={informationCircle}/>
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonContent>
);

<template>
<ion-tabs>
<!-- Tab bar -->
<ion-tab-barslot="bottom">
<ion-tab-buttontab="schedule"href="/tabs/schedule">
<ion-icon:icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-buttontab="speakers"href="/tabs/speakers">
<ion-icon:icon="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-buttontab="map"href="/tabs/map">
<ion-icon:icon="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-buttontab="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';

exportdefaultdefineComponent({
components:{
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs,
},
setup(){
return{ calendar, informationCircle, map, personCircle };
},
});
</script>