From 6b2f6618f6b44ccb93ba0866e4f7eaec61485e04 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 29 Jan 2020 14:24:22 -0500 Subject: [PATCH] docs(loading): update usage to fix code errors (#20330) closes ionic-team/ionic-docs#1200 --- core/src/components/loading/readme.md | 50 +++++++++++-------- core/src/components/loading/usage/angular.md | 15 +++--- .../components/loading/usage/javascript.md | 16 +++--- core/src/components/loading/usage/react.md | 2 +- core/src/components/loading/usage/vue.md | 17 ++++--- 5 files changed, 58 insertions(+), 42 deletions(-) diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 91b976000d..8e016beace 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -34,13 +34,12 @@ export class LoadingExample { async presentLoading() { const loading = await this.loadingController.create({ - message: 'Hellooo', + message: 'Please wait...', duration: 2000 }); await loading.present(); - + const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); } @@ -48,11 +47,15 @@ export class LoadingExample { const loading = await this.loadingController.create({ spinner: null, duration: 5000, - message: 'Please wait...', + message: 'Click the backdrop to dismiss early...', translucent: true, - cssClass: 'custom-class custom-loading' + cssClass: 'custom-class custom-loading', + backdropDismiss: true }); - return await loading.present(); + await loading.present(); + + const { role, data } = await loading.onDidDismiss(); + console.log('Loading dismissed with role:', role); } } ``` @@ -63,27 +66,31 @@ export class LoadingExample { ```javascript async function presentLoading() { const loading = document.createElement('ion-loading'); - loading.message: 'Hellooo', - loading.duration: 2000; + loading.message = 'Please wait...'; + loading.duration = 2000; document.body.appendChild(loading); await loading.present(); const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); } -function presentLoadingWithOptions() { +async function presentLoadingWithOptions() { const loading = document.createElement('ion-loading'); + loading.spinner = null; loading.duration = 5000; - loading.message = 'Please wait...'; + loading.message = 'Click the backdrop to dismiss early...'; loading.translucent = true; loading.cssClass = 'custom-class custom-loading'; + loading.backdropDismiss = true; document.body.appendChild(loading); - return loading.present(); + await loading.present(); + + const { role, data } = await loading.onDidDismiss(); + console.log('Loading dismissed with role:', role); } ``` @@ -107,7 +114,7 @@ export const LoadingExample: React.FC = () => { setShowLoading(false)} - message={'Loading...'} + message={'Please wait...'} duration={5000} /> @@ -136,14 +143,14 @@ export default { presentLoading() { return this.$ionic.loadingController .create({ - message: 'Loading', + message: 'Please wait...', duration: this.timeout, }) - .then(l => { + .then(loading => { setTimeout(function() { - l.dismiss() + loading.dismiss() }, this.timeout) - return l.present() + return loading.present() }) }, presentLoadingWithOptions() { @@ -151,15 +158,16 @@ export default { .create({ spinner: null, duration: this.timeout, - message: 'Please wait...', + message: 'Click the backdrop to dismiss early...', translucent: true, cssClass: 'custom-class custom-loading', + backdropDismiss: true }) - .then(l => { + .then(loading=> { setTimeout(function() { - l.dismiss() + loading.dismiss() }, this.timeout) - return l.present() + return loading.present() }) }, }, diff --git a/core/src/components/loading/usage/angular.md b/core/src/components/loading/usage/angular.md index 5cd21cd3ff..228fe72ada 100644 --- a/core/src/components/loading/usage/angular.md +++ b/core/src/components/loading/usage/angular.md @@ -12,13 +12,12 @@ export class LoadingExample { async presentLoading() { const loading = await this.loadingController.create({ - message: 'Hellooo', + message: 'Please wait...', duration: 2000 }); await loading.present(); - + const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); } @@ -26,11 +25,15 @@ export class LoadingExample { const loading = await this.loadingController.create({ spinner: null, duration: 5000, - message: 'Please wait...', + message: 'Click the backdrop to dismiss early...', translucent: true, - cssClass: 'custom-class custom-loading' + cssClass: 'custom-class custom-loading', + backdropDismiss: true }); - return await loading.present(); + await loading.present(); + + const { role, data } = await loading.onDidDismiss(); + console.log('Loading dismissed with role:', role); } } ``` diff --git a/core/src/components/loading/usage/javascript.md b/core/src/components/loading/usage/javascript.md index c9331f11bc..ed315a998b 100644 --- a/core/src/components/loading/usage/javascript.md +++ b/core/src/components/loading/usage/javascript.md @@ -1,26 +1,30 @@ ```javascript async function presentLoading() { const loading = document.createElement('ion-loading'); - loading.message: 'Hellooo', - loading.duration: 2000; + loading.message = 'Please wait...'; + loading.duration = 2000; document.body.appendChild(loading); await loading.present(); const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); } -function presentLoadingWithOptions() { +async function presentLoadingWithOptions() { const loading = document.createElement('ion-loading'); + loading.spinner = null; loading.duration = 5000; - loading.message = 'Please wait...'; + loading.message = 'Click the backdrop to dismiss early...'; loading.translucent = true; loading.cssClass = 'custom-class custom-loading'; + loading.backdropDismiss = true; document.body.appendChild(loading); - return loading.present(); + await loading.present(); + + const { role, data } = await loading.onDidDismiss(); + console.log('Loading dismissed with role:', role); } ``` diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md index 878bf0c1ed..3fb58fb969 100644 --- a/core/src/components/loading/usage/react.md +++ b/core/src/components/loading/usage/react.md @@ -15,7 +15,7 @@ export const LoadingExample: React.FC = () => { setShowLoading(false)} - message={'Loading...'} + message={'Please wait...'} duration={5000} /> diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md index 86f0ea6193..d259fdb728 100644 --- a/core/src/components/loading/usage/vue.md +++ b/core/src/components/loading/usage/vue.md @@ -16,14 +16,14 @@ export default { presentLoading() { return this.$ionic.loadingController .create({ - message: 'Loading', + message: 'Please wait...', duration: this.timeout, }) - .then(l => { + .then(loading => { setTimeout(function() { - l.dismiss() + loading.dismiss() }, this.timeout) - return l.present() + return loading.present() }) }, presentLoadingWithOptions() { @@ -31,15 +31,16 @@ export default { .create({ spinner: null, duration: this.timeout, - message: 'Please wait...', + message: 'Click the backdrop to dismiss early...', translucent: true, cssClass: 'custom-class custom-loading', + backdropDismiss: true }) - .then(l => { + .then(loading=> { setTimeout(function() { - l.dismiss() + loading.dismiss() }, this.timeout) - return l.present() + return loading.present() }) }, },