47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { IonIcon, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
|
|
|
import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
|
|
import { Route, Redirect } from 'react-router';
|
|
|
|
import Tab1 from './pages/Tab1';
|
|
import Tab2 from './pages/Tab2';
|
|
import Tab3 from './pages/Tab3';
|
|
|
|
import './theme/style.scss';
|
|
import './theme/floating-tab-bar.scss';
|
|
|
|
function DemoFloatingTabs() {
|
|
return (
|
|
<IonTabs className="demo-floating-tabs">
|
|
<IonRouterOutlet>
|
|
<Route exact path="/demo-floating-tabs/tab1">
|
|
<Tab1 />
|
|
</Route>
|
|
<Route exact path="/demo-floating-tabs/tab2">
|
|
<Tab2 />
|
|
</Route>
|
|
<Route path="/demo-floating-tabs/tab3">
|
|
<Tab3 />
|
|
</Route>
|
|
<Redirect exact path="/demo-floating-tabs" to="/demo-floating-tabs/tab1" />
|
|
</IonRouterOutlet>
|
|
|
|
<IonTabBar slot="bottom">
|
|
<IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
|
|
<IonIcon icon={homeOutline} />
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
|
|
<IonIcon icon={listOutline} />
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="tab3" href="/demo-floating-tabs/tab3">
|
|
<IonIcon icon={cogOutline} />
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
);
|
|
}
|
|
|
|
export default DemoFloatingTabs;
|