mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
docs(react): update component usage docs (#17615)
This commit is contained in:
@ -88,6 +88,46 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
|
||||
|
||||
const Example: React.SFC<{}> = () => (
|
||||
|
||||
<IonTabs>
|
||||
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="schedule">
|
||||
<IonIcon name="calendar" />
|
||||
<IonLabel>Schedule</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="speakers">
|
||||
<IonIcon name="contacts" />
|
||||
<IonLabel>Speakers</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="map">
|
||||
<IonIcon name="map" />
|
||||
<IonLabel>Map</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="about">
|
||||
<IonIcon name="information-circle" />
|
||||
<IonLabel>About</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
|
||||
</IonTabs>
|
||||
);
|
||||
|
||||
export default Example;
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
36
core/src/components/tab-button/usage/react.md
Normal file
36
core/src/components/tab-button/usage/react.md
Normal file
@ -0,0 +1,36 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
|
||||
|
||||
const Example: React.SFC<{}> = () => (
|
||||
|
||||
<IonTabs>
|
||||
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="schedule">
|
||||
<IonIcon name="calendar" />
|
||||
<IonLabel>Schedule</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="speakers">
|
||||
<IonIcon name="contacts" />
|
||||
<IonLabel>Speakers</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="map">
|
||||
<IonIcon name="map" />
|
||||
<IonLabel>Map</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
<IonTabButton tab="about">
|
||||
<IonIcon name="information-circle" />
|
||||
<IonLabel>About</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
|
||||
</IonTabs>
|
||||
);
|
||||
|
||||
export default Example;
|
||||
```
|
Reference in New Issue
Block a user