javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(react, vue, angular): use tabs without router (#29794)

Browse Source 
Issue number: resolves #25184 

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-08-26 08:13:20 -07:00
committed by GitHub
parent 4580edc21f
commit 867066b4eb
38 changed files with 1946 additions and 1281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/test/base/src/App.tsx
View File

@ -26,6 +26,7 @@ import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
import OverlayComponents from './pages/overlay-components/OverlayComponents';
import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
import Tabs from './pages/Tabs';
import TabsBasic from './pages/TabsBasic';
import Icons from './pages/Icons';
import NavComponent from './pages/navigation/NavComponent';
import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
@ -60,6 +61,7 @@ const App: React.FC = () => (
<Route path="/keep-contents-mounted" component={KeepContentsMounted} />
<Route path="/navigation" component={NavComponent} />
<Route path="/tabs" component={Tabs} />
<Route path="/tabs-basic" component={TabsBasic} />
<Route path="/icons" component={Icons} />
</IonRouterOutlet>
</IonReactRouter>

3
packages/react/test/base/src/pages/Main.tsx
View File

@ -37,6 +37,9 @@ const Main: React.FC<MainProps> = () => {
<IonItem routerLink="/tabs">
<IonLabel>Tabs</IonLabel>
</IonItem>
<IonItem routerLink="/tabs-basic">
<IonLabel>Tabs with Basic Navigation</IonLabel>
</IonItem>
<IonItem routerLink="/icons">
<IonLabel>Icons</IonLabel>
</IonItem>

35
packages/react/test/base/src/pages/TabsBasic.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab } from '@ionic/react';
interface TabsProps {}
const TabsBasic: React.FC<TabsProps> = () => {
const onTabWillChange = (event: CustomEvent) => {
console.log('onIonTabsWillChange', event.detail.tab);
};
const onTabDidChange = (event: CustomEvent) => {
console.log('onIonTabsDidChange:', event.detail.tab);
};
return (
<IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
<IonTab tab="tab1">
<IonLabel>Tab 1 Content</IonLabel>
</IonTab>
<IonTab tab="tab2">
<IonLabel>Tab 2 Content</IonLabel>
</IonTab>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1">
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2">
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default TabsBasic;