javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(loading): show how to use dismiss method returns from useIonLoading for react (#23537)

Browse Source
This commit is contained in:
omar2205
2021-07-07 15:04:10 +02:00
committed by GitHub
parent 635ac195d9
commit a15cace139
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/loading/readme.md
View File

@ -139,17 +139,23 @@ import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
interface LoadingProps {} interface LoadingProps {}
const LoadingExample: React.FC<LoadingProps> = () => { const LoadingExample: React.FC<LoadingProps> = () => {
const [present] = useIonLoading(); const [present, dismiss] = useIonLoading();
/**
* The recommended way of dismissing is to use the `dismiss` property
* on `IonLoading`, but the `dismiss` method returned from `useIonLoading`
* can be used for more complex scenarios.
*/
return ( return (
<IonPage> <IonPage>
<IonContent> <IonContent>
<IonButton <IonButton
expand="block" expand="block"
onClick={() => onClick={() => {
present({ present({
duration: 3000, message: 'Loading...',
duration: 3000
}) })
} }}
> >
Show Loading Show Loading
</IonButton> </IonButton>

14
core/src/components/loading/usage/react.md
View File

@ -7,17 +7,23 @@ import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
interface LoadingProps {} interface LoadingProps {}
const LoadingExample: React.FC<LoadingProps> = () => { const LoadingExample: React.FC<LoadingProps> = () => {
const [present] = useIonLoading(); const [present, dismiss] = useIonLoading();
/**
* The recommended way of dismissing is to use the `dismiss` property
* on `IonLoading`, but the `dismiss` method returned from `useIonLoading`
* can be used for more complex scenarios.
*/
return ( return (
<IonPage> <IonPage>
<IonContent> <IonContent>
<IonButton <IonButton
expand="block" expand="block"
onClick={() => onClick={() => {
present({ present({
duration: 3000, message: 'Loading...',
duration: 3000
}) })
} }}
> >
Show Loading Show Loading
</IonButton> </IonButton>