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

71
core/src/components/toolbar/readme.md
View File

@ -732,15 +732,15 @@ export class ToolbarExample {
<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-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@ -749,7 +749,7 @@ export class ToolbarExample {
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="start" name="person-circle"></ion-icon>
<ion-icon slot="start" :icon="person-circle"></ion-icon>
Contact
</ion-button>
</ion-buttons>
@ -757,7 +757,7 @@ export class ToolbarExample {
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
<ion-icon slot="end" :icon="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
@ -765,7 +765,7 @@ export class ToolbarExample {
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="start" name="star"></ion-icon>
<ion-icon slot="start" :icon="star"></ion-icon>
Star
</ion-button>
</ion-buttons>
@ -773,7 +773,7 @@ export class ToolbarExample {
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create"></ion-icon>
<ion-icon slot="end" :icon="create"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
@ -799,7 +799,7 @@ export class ToolbarExample {
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
@ -808,7 +808,7 @@ export class ToolbarExample {
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button @click="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
@ -821,7 +821,7 @@ export class ToolbarExample {
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button @click="clickedSearch()">
<ion-icon slot="icon-only" name="search"></ion-icon>
<ion-icon slot="icon-only" :icon="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Search Favorites"></ion-searchbar>
@ -841,15 +841,15 @@ export class ToolbarExample {
<ion-toolbar color="secondary">
<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-buttons slot="primary">
<ion-button color="primary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary Toolbar</ion-title>
@ -858,20 +858,59 @@ export class ToolbarExample {
<ion-toolbar color="dark">
<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-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark Toolbar</ion-title>
</ion-toolbar>
</template>
<script>
import {
IonButton,
IonButtons,
IonIcon,
IonTitle,
IonToolbar
} from '@ionic/vue';
import {
ellipsisHorizontal,
ellipsisVertical,
helpCircle,
personCircle,
search,
star
} from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonButton,
IonButtons,
IonIcon,
IonTitle,
IonToolbar
},
setup() {
return {
ellipsisHorizontal,
ellipsisVertical,
helpCircle,
personCircle,
search,
star
}
}
});
</script>
```

71
core/src/components/toolbar/usage/vue.md
View File

@ -21,15 +21,15 @@
<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-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@ -38,7 +38,7 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="start" name="person-circle"></ion-icon>
<ion-icon slot="start" :icon="person-circle"></ion-icon>
Contact
</ion-button>
</ion-buttons>
@ -46,7 +46,7 @@
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
<ion-icon slot="end" :icon="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
@ -54,7 +54,7 @@
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="start" name="star"></ion-icon>
<ion-icon slot="start" :icon="star"></ion-icon>
Star
</ion-button>
</ion-buttons>
@ -62,7 +62,7 @@
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create"></ion-icon>
<ion-icon slot="end" :icon="create"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
@ -88,7 +88,7 @@
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
@ -97,7 +97,7 @@
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button @click="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
@ -110,7 +110,7 @@
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button @click="clickedSearch()">
<ion-icon slot="icon-only" name="search"></ion-icon>
<ion-icon slot="icon-only" :icon="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Search Favorites"></ion-searchbar>
@ -130,15 +130,15 @@
<ion-toolbar color="secondary">
<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-buttons slot="primary">
<ion-button color="primary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary Toolbar</ion-title>
@ -147,18 +147,57 @@
<ion-toolbar color="dark">
<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-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
<ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark Toolbar</ion-title>
</ion-toolbar>
</template>
<script>
import {
IonButton,
IonButtons,
IonIcon,
IonTitle,
IonToolbar
} from '@ionic/vue';
import {
ellipsisHorizontal,
ellipsisVertical,
helpCircle,
personCircle,
search,
star
} from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonButton,
IonButtons,
IonIcon,
IonTitle,
IonToolbar
},
setup() {
return {
ellipsisHorizontal,
ellipsisVertical,
helpCircle,
personCircle,
search,
star
}
}
});
</script>
```