javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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 2647 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/modal/readme.md
View File

@@ -591,7 +591,10 @@ async presentModal() {
</template>
<script>
export default {
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Modal',
props: {
title: { type: String, default: 'Super Modal' },
@@ -601,26 +604,29 @@ export default {
content: 'Content',
}
},
}
components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>
```
```html
<template>
<ion-page class="ion-page">
<ion-content class="ion-content ion-padding">
<ion-page>
<ion-content class="ion-padding">
<ion-button @click="openModal">Open Modal</ion-button>
</ion-content>
</ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './modal.vue'
export default {
components: { IonButton, IonContent, IonPage },
methods: {
openModal() {
return this.$ionic.modalController
async openModal() {
const modal = await modalController
.create({
component: Modal,
cssClass: 'my-custom-class',
@@ -633,7 +639,7 @@ export default {
},
},
})
.then(m => m.present())
return modal.present();
},
},
}

20
core/src/components/modal/usage/vue.md
View File

@@ -13,7 +13,10 @@
</template>
<script>
export default {
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Modal',
props: {
title: { type: String, default: 'Super Modal' },
@@ -23,26 +26,29 @@ export default {
content: 'Content',
}
},
}
components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>
```
```html
<template>
<ion-page class="ion-page">
<ion-content class="ion-content ion-padding">
<ion-page>
<ion-content class="ion-padding">
<ion-button @click="openModal">Open Modal</ion-button>
</ion-content>
</ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './modal.vue'
export default {
components: { IonButton, IonContent, IonPage },
methods: {
openModal() {
return this.$ionic.modalController
async openModal() {
const modal = await modalController
.create({
component: Modal,
cssClass: 'my-custom-class',
@@ -55,7 +61,7 @@ export default {
},
},
})
.then(m => m.present())
return modal.present();
},
},
}