javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27: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

46
core/src/components/refresher/readme.md
View File

@ -85,6 +85,52 @@ export class RefresherExample {
```
### React
```tsx
import React from 'react';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
function doRefresh(event: CustomEvent) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Refresher --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent></IonRefresherContent>
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Content --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</IonRefresherContent>
</IonRefresher>
</IonContent>
</>
}
);
export default Example
## Properties

42
core/src/components/refresher/usage/react.md Normal file
View File

@ -0,0 +1,42 @@
```tsx
import React from 'react';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
function doRefresh(event: CustomEvent) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Refresher --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent></IonRefresherContent>
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Content --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</IonRefresherContent>
</IonRefresher>
</IonContent>
</>
}
);
export default Example