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

47
core/src/components/menu/readme.md
View File

@@ -431,26 +431,45 @@ export class MenuExample {
}
</style>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
<script>
import {
IonContent,
IonHeader,
IonItem,
IonList,
IonMenu,
IonRouterOutlet,
IonTitle,
IonToolbar,
mentController
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonContent,
IonHeader,
IonItem,
IonList,
IonMenu,
IonRouterOutlet,
IonTitle,
IonToolbar
},
methods: {
openFirst() {
this.menu.enable(true, 'first');
this.menu.open('first');
}
mentController.enable(true, 'first');
mentController.open('first');
},
openEnd() {
this.menu.open('end');
}
mentController.open('end');
},
openCustom() {
this.menu.enable(true, 'custom');
this.menu.open('custom');
mentController.enable(true, 'custom');
mentController.open('custom');
}
}
});
</script>
```

47
core/src/components/menu/usage/vue.md
View File

@@ -59,25 +59,44 @@
}
</style>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
<script>
import {
IonContent,
IonHeader,
IonItem,
IonList,
IonMenu,
IonRouterOutlet,
IonTitle,
IonToolbar,
mentController
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonContent,
IonHeader,
IonItem,
IonList,
IonMenu,
IonRouterOutlet,
IonTitle,
IonToolbar
},
methods: {
openFirst() {
this.menu.enable(true, 'first');
this.menu.open('first');
}
mentController.enable(true, 'first');
mentController.open('first');
},
openEnd() {
this.menu.open('end');
}
mentController.open('end');
},
openCustom() {
this.menu.enable(true, 'custom');
this.menu.open('custom');
mentController.enable(true, 'custom');
mentController.open('custom');
}
}
});
</script>
```