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): 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

40
core/src/components/select-option/readme.md
View File

@ -516,6 +516,15 @@ export class SelectOptionExample {
</ion-select>
</ion-item>
</template>
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption }
});
</script>
```
### Customizing Options
@ -563,16 +572,20 @@ export class SelectOptionExample {
</ion-item>
</template>
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
options: any = {
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption },
setup() {
const options: any = {
cssClass: 'my-custom-interface'
};
return { options }
}
});
</script>
```
@ -630,15 +643,20 @@ To customize an individual option, set a class on the `ion-select-option`:
</ion-item>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
options: any = {
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption },
setup() {
const options: any = {
cssClass: 'my-custom-interface'
};
return { options }
}
});
</script>
```

40
core/src/components/select-option/usage/vue.md
View File

@ -10,6 +10,15 @@
</ion-select>
</ion-item>
</template>
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption }
});
</script>
```
### Customizing Options
@ -57,16 +66,20 @@
</ion-item>
</template>
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
options: any = {
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption },
setup() {
const options: any = {
cssClass: 'my-custom-interface'
};
return { options }
}
});
</script>
```
@ -124,15 +137,20 @@ To customize an individual option, set a class on the `ion-select-option`:
</ion-item>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
options: any = {
export default defineComponent({
components: { IonItem, IonLabel, IonSelect, IonSelectOption },
setup() {
const options: any = {
cssClass: 'my-custom-interface'
};
return { options }
}
});
</script>
```