octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

docs(vue): update component usage examples for vue 3 (#22050)

Browse Source
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Liam DeBeasi
2020-09-11 13:48:21 -04:00
committed by GitHub
gitea-unlock(16/)
parent 74af3cb50b
commit db2cac20fb
octicon-diff(16/tw-mr-1) 118 changed files with 2647 additions and 544 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/tab-bar/readme.md
View File

@@ -126,17 +126,30 @@ export class TabBarExample {
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
<ion-icon :icon="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
<ion-icon :icon="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
import { call, person, settings } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
setup() {
return { call, person, settings }
}
});
</script>
```

19
core/src/components/tab-bar/usage/vue.md
View File

@@ -4,15 +4,28 @@
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
<ion-icon :icon="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
<ion-icon :icon="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
<ion-icon :icon="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
import { call, person, settings } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
setup() {
return { call, person, settings }
}
});
</script>
```