docs(react): update component usage docs (#17615)

This commit is contained in:
Josh Thomas
2019-02-26 08:54:01 -06:00
committed by GitHub
parent f44c17e03b
commit 22d1aeebaa
113 changed files with 7207 additions and 0 deletions

View File

@ -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

View 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;
```