javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16: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

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

@ -286,6 +286,7 @@ export class ActionSheetExample {
<script>
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonButton },
@ -299,35 +300,35 @@ export default defineComponent({
{
text: 'Delete',
role: 'destructive',
icon: 'trash',
icon: trash,
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: 'share',
icon: share,
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: 'caret-forward-circle',
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: 'heart',
icon: heart,
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: 'close',
icon: close,
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
@ -342,6 +343,77 @@ export default defineComponent({
</script>
```
Developers can also use this component directly in their template:
```html
<template>
<ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
<ion-action-sheet
:is-open="isOpenRef"
header="Albums"
css-class="my-custom-class"
:buttons="buttons"
@onDidDismiss="setOpen(false)"
>
</ion-action-sheet>
</template>
<script>
import { IonActionSheet, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonActionSheet, IonButton },
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
const buttons = [
{
text: 'Delete',
role: 'destructive',
icon: trash,
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: share,
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: heart,
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: close,
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
},
},
];
return { buttons, isOpenRef, setOpen }
}
});
</script>
```
## Properties

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

@ -6,6 +6,7 @@
<script>
import { IonButton, actionSheetController } from '@ionic/vue';
import { defineComponent } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonButton },
@ -19,35 +20,35 @@ export default defineComponent({
{
text: 'Delete',
role: 'destructive',
icon: 'trash',
icon: trash,
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: 'share',
icon: share,
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: 'caret-forward-circle',
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: 'heart',
icon: heart,
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: 'close',
icon: close,
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
@ -61,3 +62,74 @@ export default defineComponent({
});
</script>
```
Developers can also use this component directly in their template:
```html
<template>
<ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
<ion-action-sheet
:is-open="isOpenRef"
header="Albums"
css-class="my-custom-class"
:buttons="buttons"
@onDidDismiss="setOpen(false)"
>
</ion-action-sheet>
</template>
<script>
import { IonActionSheet, IonButton } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
export default defineComponent({
components: { IonActionSheet, IonButton },
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
const buttons = [
{
text: 'Delete',
role: 'destructive',
icon: trash,
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: share,
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: heart,
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: close,
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
},
},
];
return { buttons, isOpenRef, setOpen }
}
});
</script>
```