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

23
core/src/components/card/readme.md
View File

@ -215,7 +215,7 @@ export class CardExample {
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-icon :icon="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-button fill="outline" slot="end">View</ion-button>
</ion-item>
@ -228,26 +228,39 @@ export class CardExample {
<ion-card>
<ion-item href="#" class="ion-activated">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-icon :icon="wifi" slot="start"></ion-icon>
<ion-label>Card Link Item 1 activated</ion-label>
</ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-icon :icon="wine" slot="start"></ion-icon>
<ion-label>Card Link Item 2</ion-label>
</ion-item>
<ion-item class="ion-activated">
<ion-icon name="warning" slot="start"></ion-icon>
<ion-icon :icon="warning" slot="start"></ion-icon>
<ion-label>Card Button Item 1 activated</ion-label>
</ion-item>
<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-icon :icon="walk" slot="start"></ion-icon>
<ion-label>Card Button Item 2</ion-label>
</ion-item>
</ion-card>
</template>
<script>
import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
setup() {
return { warning };
}
});
</script>
```

23
core/src/components/card/usage/vue.md
View File

@ -14,7 +14,7 @@
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-icon :icon="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-button fill="outline" slot="end">View</ion-button>
</ion-item>
@ -27,24 +27,37 @@
<ion-card>
<ion-item href="#" class="ion-activated">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-icon :icon="wifi" slot="start"></ion-icon>
<ion-label>Card Link Item 1 activated</ion-label>
</ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-icon :icon="wine" slot="start"></ion-icon>
<ion-label>Card Link Item 2</ion-label>
</ion-item>
<ion-item class="ion-activated">
<ion-icon name="warning" slot="start"></ion-icon>
<ion-icon :icon="warning" slot="start"></ion-icon>
<ion-label>Card Button Item 1 activated</ion-label>
</ion-item>
<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-icon :icon="walk" slot="start"></ion-icon>
<ion-label>Card Button Item 2</ion-label>
</ion-item>
</ion-card>
</template>
<script>
import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
setup() {
return { warning };
}
});
</script>
```