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

54
core/src/components/skeleton-text/readme.md
View File

@@ -719,7 +719,7 @@ export class SkeletonTextExample {
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="call" slot="start"></ion-icon>
<ion-icon :icon="call" slot="start"></ion-icon>
<ion-label>
<h3>
{{ data.heading }}
@@ -812,23 +812,45 @@ export class SkeletonTextExample {
}
</style>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListheader,
IonSkeletonText,
IonThumbnail
} from '@ionic/vue';
import { call } from 'ionicons/icons';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
data: any;
mounted() {
setTimeout(() => {
this.data = {
'heading': 'Normal text',
'para1': 'Lorem ipsum dolor sit amet, consectetur',
'para2': 'adipiscing elit.'
};
}, 5000);
}
export default defineComponent({
components: {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListheader,
IonSkeletonText,
IonThumbnail
},
setup() {
const data = ref();
setTimeout(() => {
data.value = {
'heading': 'Normal text',
'para1': 'Lorem ipsum dolor sit amet, consectetur',
'para2': 'adipiscing elit.'
};
}, 5000);
return { data }
}
});
</script>
```

54
core/src/components/skeleton-text/usage/vue.md
View File

@@ -45,7 +45,7 @@
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="call" slot="start"></ion-icon>
<ion-icon :icon="call" slot="start"></ion-icon>
<ion-label>
<h3>
{{ data.heading }}
@@ -138,22 +138,44 @@
}
</style>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script>
import {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListheader,
IonSkeletonText,
IonThumbnail
} from '@ionic/vue';
import { call } from 'ionicons/icons';
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
data: any;
mounted() {
setTimeout(() => {
this.data = {
'heading': 'Normal text',
'para1': 'Lorem ipsum dolor sit amet, consectetur',
'para2': 'adipiscing elit.'
};
}, 5000);
}
export default defineComponent({
components: {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListheader,
IonSkeletonText,
IonThumbnail
},
setup() {
const data = ref();
setTimeout(() => {
data.value = {
'heading': 'Normal text',
'para1': 'Lorem ipsum dolor sit amet, consectetur',
'para2': 'adipiscing elit.'
};
}, 5000);
return { data }
}
});
</script>
```