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

38
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>
<IonRouterOutlet>
<Redirect exact path="/" to="/tabs/schedule" />
{/*
Using the render method prop cuts down the number of renders your components will have due to route changes.
Use the component prop when your component depends on the RouterComponentProps passed in automatically.
*/}
<Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
<Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
<Route path="/tabs/map" render={() => <MapView />} exact={true} />
<Route path="/tabs/about" render={() => <About />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom"> <IonTabBar slot="bottom">
<IonTabButton tab="schedule"> <IonTabButton tab="schedule" href="/tabs/schedule">
<IonIcon name="calendar" /> <IonIcon icon={calendar} />
<IonLabel>Schedule</IonLabel> <IonLabel>Schedule</IonLabel>
<IonBadge>6</IonBadge>
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers" href="/tabs/speakers">
<IonTabButton tab="speakers"> <IonIcon icon={contacts} />
<IonIcon name="contacts" />
<IonLabel>Speakers</IonLabel> <IonLabel>Speakers</IonLabel>
</IonTabButton> </IonTabButton>
<IonTabButton tab="map" href="/tabs/map">
<IonTabButton tab="map"> <IonIcon icon={map} />
<IonIcon name="map" />
<IonLabel>Map</IonLabel> <IonLabel>Map</IonLabel>
</IonTabButton> </IonTabButton>
<IonTabButton tab="about" href="/tabs/about">
<IonTabButton tab="about"> <IonIcon icon={informationCircle} />
<IonIcon name="information-circle" />
<IonLabel>About</IonLabel> <IonLabel>About</IonLabel>
</IonTabButton> </IonTabButton>
</IonTabBar> </IonTabBar>
</IonTabs> </IonTabs>
); );
``` ```