javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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

50
core/src/components/buttons/readme.md
View File

@ -103,6 +103,56 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
```
### React
```tsx
import React from 'react';
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
</IonButtons>
<IonTitle>Back Button</IonTitle>
</IonToolbar>
<IonToolbar>
<IonButtons slot="secondary">
<IonButton>
<IonIcon slot="icon-only" name="contact" />
</IonButton>
<IonButton> />
<IonIcon slot="icon-only" name="search" />
</IonButton>
</IonButtons>
<IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary">
<IonButton color="secondary"> />
<IonIcon slot="icon-only" name="more" />
</IonButton>
</IonButtons>
</IonToolbar>
<IonToolbar>
<IonButtons slot="primary">
<IonButton onClick={() => {}}>
<IonIcon slot="icon-only" name="star" />
</IonButton>
</IonButtons>
<IonTitle>Right side menu toggle</IonTitle>
<IonButtons slot="end">
<IonMenuButton autoHide={false} />
</IonButtons>
</IonToolbar>
</>
);
export default Example;
----------------------------------------------

46
core/src/components/buttons/usage/react.md Normal file
View File

@ -0,0 +1,46 @@
```tsx
import React from 'react';
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
</IonButtons>
<IonTitle>Back Button</IonTitle>
</IonToolbar>
<IonToolbar>
<IonButtons slot="secondary">
<IonButton>
<IonIcon slot="icon-only" name="contact" />
</IonButton>
<IonButton> />
<IonIcon slot="icon-only" name="search" />
</IonButton>
</IonButtons>
<IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary">
<IonButton color="secondary"> />
<IonIcon slot="icon-only" name="more" />
</IonButton>
</IonButtons>
</IonToolbar>
<IonToolbar>
<IonButtons slot="primary">
<IonButton onClick={() => {}}>
<IonIcon slot="icon-only" name="star" />
</IonButton>
</IonButtons>
<IonTitle>Right side menu toggle</IonTitle>
<IonButtons slot="end">
<IonMenuButton autoHide={false} />
</IonButtons>
</IonToolbar>
</>
);
export default Example;