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

70
core/src/components/alert/readme.md
View File

@@ -1155,45 +1155,47 @@ export class AlertExample {
```html
<template>
<IonVuePage :title="'Alert'">
<ion-button @click="presentAlert">Show Alert</ion-button>
<ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
<ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
<ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
<ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
<ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
</IonVuePage>
<ion-button @click="presentAlert">Show Alert</ion-button>
<ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
<ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
<ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
<ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
<ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
</template>
<script>
export default {
import { IonButton, alertController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonButton },
methods: {
presentAlert() {
return this.$ionic.alertController
async presentAlert() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK'],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertMultipleButtons() {
return this.$ionic.alertController
async presentAlertMultipleButtons() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete'],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertConfirm() {
return this.$ionic.alertController
async presentAlertConfirm() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Confirm!',
@@ -1214,12 +1216,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertPrompt() {
return this.$ionic.alertController
async presentAlertPrompt() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Prompt!',
@@ -1288,12 +1290,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertRadio() {
return this.$ionic.alertController
async presentAlertRadio() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Radio',
@@ -1346,12 +1348,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertCheckbox() {
return this.$ionic.alertController
async presentAlertCheckbox() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Checkbox',
@@ -1409,11 +1411,11 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
},
}
});
</script>
```

70
core/src/components/alert/usage/vue.md
View File

@@ -1,44 +1,46 @@
```html
<template>
<IonVuePage :title="'Alert'">
<ion-button @click="presentAlert">Show Alert</ion-button>
<ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
<ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
<ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
<ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
<ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
</IonVuePage>
<ion-button @click="presentAlert">Show Alert</ion-button>
<ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
<ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
<ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
<ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
<ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
</template>
<script>
export default {
import { IonButton, alertController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonButton },
methods: {
presentAlert() {
return this.$ionic.alertController
async presentAlert() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK'],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertMultipleButtons() {
return this.$ionic.alertController
async presentAlertMultipleButtons() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete'],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertConfirm() {
return this.$ionic.alertController
async presentAlertConfirm() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Confirm!',
@@ -59,12 +61,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertPrompt() {
return this.$ionic.alertController
async presentAlertPrompt() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Prompt!',
@@ -133,12 +135,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertRadio() {
return this.$ionic.alertController
async presentAlertRadio() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Radio',
@@ -191,12 +193,12 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
presentAlertCheckbox() {
return this.$ionic.alertController
async presentAlertCheckbox() {
const alert = await alertController
.create({
cssClass: 'my-custom-class',
header: 'Checkbox',
@@ -254,10 +256,10 @@ export default {
},
},
],
})
.then(a => a.present())
});
return alert.present();
},
},
}
});
</script>
```