javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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

55
core/src/components/segment-button/readme.md
View File

@ -658,10 +658,10 @@ export class SegmentButtonExample {
<!-- Segment buttons with values and icons -->
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
<ion-icon :icon="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
<ion-icon :icon="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
@ -694,13 +694,13 @@ export class SegmentButtonExample {
<!-- Icon only -->
<ion-segment value="heart">
<ion-segment-button value="call">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="heart">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="pin">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
@ -708,30 +708,30 @@ export class SegmentButtonExample {
<ion-segment value="2">
<ion-segment-button value="1">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon bottom -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-bottom">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-bottom">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-bottom">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
@ -740,44 +740,57 @@ export class SegmentButtonExample {
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-start">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-start">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-start">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon end -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-end">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" disabled layout="icon-end">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-end">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
segmentChanged(ev: any) {
export default defineComponent({
components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
methods: {
segmentChanged(ev: CustomEvent) {
console.log('Segment changed', ev);
}
}
setup() {
return {
bookmark,
call,
camera,
heart,
pin
}
}
});
</script>
```

55
core/src/components/segment-button/usage/vue.md
View File

@ -26,10 +26,10 @@
<!-- Segment buttons with values and icons -->
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
<ion-icon :icon="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
<ion-icon :icon="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
@ -62,13 +62,13 @@
<!-- Icon only -->
<ion-segment value="heart">
<ion-segment-button value="call">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="heart">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="pin">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
@ -76,30 +76,30 @@
<ion-segment value="2">
<ion-segment-button value="1">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon bottom -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-bottom">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-bottom">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-bottom">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
@ -108,43 +108,56 @@
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-start">
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="2" layout="icon-start">
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-start">
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Icon end -->
<ion-segment value="1">
<ion-segment-button value="1" layout="icon-end">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
<ion-label>Item One</ion-label>
</ion-segment-button>
<ion-segment-button value="2" disabled layout="icon-end">
<ion-icon name="heart"></ion-icon>
<ion-icon :icon="heart"></ion-icon>
<ion-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="3" layout="icon-end">
<ion-icon name="pin"></ion-icon>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
segmentChanged(ev: any) {
export default defineComponent({
components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
methods: {
segmentChanged(ev: CustomEvent) {
console.log('Segment changed', ev);
}
}
setup() {
return {
bookmark,
call,
camera,
heart,
pin
}
}
});
</script>
```