javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27: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 2659 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/buttons/readme.md
View File

@ -260,10 +260,10 @@ export class ButtonsExample {
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
<ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
<ion-icon slot="icon-only" :icon="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@ -295,6 +295,22 @@ export class ButtonsExample {
<ion-title>Collapsible Buttons</ion-title>
</ion-toolbar>
</template>
<script>
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
import { personCircle, search } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
setup() {
const clickedStar = () => {
console.log('Star clicked!');
}
return { personCircle, search, clickedStar };
}
});
</script>
```

20
core/src/components/buttons/usage/vue.md
View File

@ -10,10 +10,10 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
<ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
<ion-icon slot="icon-only" :icon="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@ -45,4 +45,20 @@
<ion-title>Collapsible Buttons</ion-title>
</ion-toolbar>
</template>
<script>
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
import { personCircle, search } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
setup() {
const clickedStar = () => {
console.log('Star clicked!');
}
return { personCircle, search, clickedStar };
}
});
</script>
```