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(vue): add revised overlay examples (#22173)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-25 10:27:27 -04:00
committed by GitHub
parent cc45ad815c
commit aeda33d8ae
12 changed files with 484 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -265,6 +265,40 @@ export default defineComponent({
</script>
```
Developers can also use this component directly in their template:
```html
<template>
<ion-button @click="setOpen(true)">Show Loading</ion-button>
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Please wait..."
:duration="timeout"
@onDidDismiss="setOpen(false)"
>
</ion-loading>
</template>
<script>
import { IonLoading, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
timeout: { type: Number, default: 1000 },
},
components: { IonLoading, IonButton },
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
return { isOpenRef, setOpen }
}
});
</script>
```
## Properties

34
core/src/components/loading/usage/vue.md
View File

@ -52,3 +52,37 @@ export default defineComponent({
});
</script>
```
Developers can also use this component directly in their template:
```html
<template>
<ion-button @click="setOpen(true)">Show Loading</ion-button>
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Please wait..."
:duration="timeout"
@onDidDismiss="setOpen(false)"
>
</ion-loading>
</template>
<script>
import { IonLoading, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
timeout: { type: Number, default: 1000 },
},
components: { IonLoading, IonButton },
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
return { isOpenRef, setOpen }
}
});
</script>
```