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

chore(react): fix tabs docs (#19995)

Browse Source
This commit is contained in:
Ely Lucas
2019-11-25 11:15:03 -07:00
committed by Ely Lucas
parent aaf9d24afd
commit 93bd4afb1d
1 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
core/src/components/tabs/readme.md
View File

@ -176,34 +176,38 @@ will match the following tab:
### React ### React
```tsx ```tsx
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
export const TabsExample: React.FC = () => ( export const TabsExample: React.FC = () => (
<IonTabs> <IonTabs>
<IonTabBar slot="bottom"> <IonRouterOutlet>
<IonTabButton tab="schedule"> <Redirect exact path="/" to="/tabs/schedule" />
<IonIcon name="calendar" /> {/*
<IonLabel>Schedule</IonLabel> Using the render method prop cuts down the number of renders your components will have due to route changes.
<IonBadge>6</IonBadge> Use the component prop when your component depends on the RouterComponentProps passed in automatically.
</IonTabButton> */}
<Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
<IonTabButton tab="speakers"> <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
<IonIcon name="contacts" /> <Route path="/tabs/map" render={() => <MapView />} exact={true} />
<IonLabel>Speakers</IonLabel> <Route path="/tabs/about" render={() => <About />} exact={true} />
</IonTabButton> </IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="map"> <IonTabButton tab="schedule" href="/tabs/schedule">
<IonIcon name="map" /> <IonIcon icon={calendar} />
<IonLabel>Map</IonLabel> <IonLabel>Schedule</IonLabel>
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers" href="/tabs/speakers">
<IonTabButton tab="about"> <IonIcon icon={contacts} />
<IonIcon name="information-circle" /> <IonLabel>Speakers</IonLabel>
<IonLabel>About</IonLabel> </IonTabButton>
</IonTabButton> <IonTabButton tab="map" href="/tabs/map">
</IonTabBar> <IonIcon icon={map} />
</IonTabs> <IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about" href="/tabs/about">
<IonIcon icon={informationCircle} />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
); );
``` ```