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

83
core/src/components/select/readme.md
View File

@@ -1084,6 +1084,29 @@ export class SelectExample {
</ion-list>
</template>
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
}
});
</script>
```
### Multiple Selection
@@ -1124,6 +1147,29 @@ export class SelectExample {
</ion-item>
</ion-list>
</template>
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
}
});
</script>
```
### Interface Options
@@ -1177,29 +1223,52 @@ export class SelectExample {
</ion-list>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
customAlertOptions: any = {
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
},
setup() {
const customAlertOptions: any = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
customPopoverOptions: any = {
const customPopoverOptions: any = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
customActionSheetOptions: any = {
const customActionSheetOptions: any = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
return {
customAlertOptions,
customPopoverOptions,
customActionSheetOptions
}
}
});
</script>
```

83
core/src/components/select/usage/vue.md
View File

@@ -29,6 +29,29 @@
</ion-list>
</template>
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
}
});
</script>
```
### Multiple Selection
@@ -69,6 +92,29 @@
</ion-item>
</ion-list>
</template>
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
}
});
</script>
```
### Interface Options
@@ -122,28 +168,51 @@
</ion-list>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
} from '@ionic/vue';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
customAlertOptions: any = {
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSelect,
IonSelectOption
},
setup() {
const customAlertOptions: any = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
customPopoverOptions: any = {
const customPopoverOptions: any = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
customActionSheetOptions: any = {
const customActionSheetOptions: any = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
return {
customAlertOptions,
customPopoverOptions,
customActionSheetOptions
}
}
});
</script>
```