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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

65
core/src/components/back-button/readme.md
View File

@ -115,6 +115,71 @@ To change what is displayed in the back button, use the `text` and `icon` proper
```
### React
```tsx
import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default back button --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with a default href --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} defaultHref="home" />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with custom text and icon --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton
goBack={() => {}}
text="buttonText"
icon="buttonIcon"
/>
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with no text and custom icon --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} text="" icon="add" />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Danger back button next to a menu button --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
<IonBackButton goBack={() => {}} color="danger" />
</IonButtons>
</IonToolbar>
</IonHeader>
</>
);
export default Example;
```
## Properties

61
core/src/components/back-button/usage/react.md Normal file
View File

@ -0,0 +1,61 @@
```tsx
import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default back button --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with a default href --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} defaultHref="home" />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with custom text and icon --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton
goBack={() => {}}
text="buttonText"
icon="buttonIcon"
/>
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Back button with no text and custom icon --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} text="" icon="add" />
</IonButtons>
</IonToolbar>
</IonHeader>
{/*-- Danger back button next to a menu button --*/}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
<IonBackButton goBack={() => {}} color="danger" />
</IonButtons>
</IonToolbar>
</IonHeader>
</>
);
export default Example;
```