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): update component usage examples for vue 3 (#22050)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-11 13:48:21 -04:00
committed by GitHub
parent 74af3cb50b
commit db2cac20fb
118 changed files with 2659 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/action-sheet/readme.md
View File

@ -280,16 +280,18 @@ export class ActionSheetExample {
```html
<template>
<IonVuePage :title="'Action Sheet'">
<ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</IonVuePage>
<ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</template>
<script>
export default {
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonButton },
methods: {
presentActionSheet() {
return this.$ionic.actionSheetController
async presentActionSheet() {
const actionSheet = await actionSheetController
.create({
header: 'Albums',
cssClass: 'my-custom-class',
@ -332,11 +334,11 @@ export default {
},
},
],
})
.then(a => a.present())
});
return actionSheet.present();
},
},
}
});
</script>
```

20
core/src/components/action-sheet/usage/vue.md
View File

@ -1,15 +1,17 @@
```html
<template>
<IonVuePage :title="'Action Sheet'">
<ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</IonVuePage>
<ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
</template>
<script>
export default {
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonButton },
methods: {
presentActionSheet() {
return this.$ionic.actionSheetController
async presentActionSheet() {
const actionSheet = await actionSheetController
.create({
header: 'Albums',
cssClass: 'my-custom-class',
@ -52,10 +54,10 @@ export default {
},
},
],
})
.then(a => a.present())
});
return actionSheet.present();
},
},
}
});
</script>
```