javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +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 {}
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 (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
onClick={() => {
present({
duration: 3000,
message: 'Loading...',
duration: 3000
})
}
}}
>
Show Loading
</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 {}
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 (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
onClick={() => {
present({
duration: 3000,
message: 'Loading...',
duration: 3000
})
}
}}
>
Show Loading
</IonButton>