37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { RouteComponentProps } from 'react-router-dom';
|
|
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
|
|
import { Redirect, Route } from 'react-router-dom';
|
|
import Tab1 from '../pages/Tab1';
|
|
import Tab2 from '../pages/Tab2';
|
|
import Tab3 from '../pages/Tab3';
|
|
import { chatboxOutline, cogOutline, personOutline } from 'ionicons/icons';
|
|
|
|
interface TabsProps {}
|
|
|
|
const Tabs: React.FC<TabsProps> = () => {
|
|
return (
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
<Route exact path="/tabs/tab1" component={Tab1} />
|
|
<Route exact path="/tabs/tab2" component={Tab2} />
|
|
<Route exact path="/tabs/tab3" component={Tab3} />
|
|
</IonRouterOutlet>
|
|
|
|
<IonTabBar slot="bottom">
|
|
<IonTabButton tab="tab1" href="/tabs/tab1">
|
|
<IonIcon icon={chatboxOutline} />
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab2" href="/tabs/tab2">
|
|
<IonIcon icon={personOutline} />
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab3" href="/tabs/tab3">
|
|
<IonIcon icon={cogOutline} />
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|