javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-26 16:21:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(tabs): add correct vue examples (#22510)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-11-17 11:02:28 -05:00
committed by GitHub
parent ce4a381d4f
commit 33768e1d0c
3 changed files with 206 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/tab/readme.md
View File

@ -2,8 +2,9 @@
The tab component is a child component of [tabs](../tabs). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
See the [tabs documentation](../tabs/) for more details on configuring tabs.
> Note: This component should only be used with vanilla or Stencil JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
See the [tabs documentation](../tabs/) for more details on configuring tabs.
<!-- Auto Generated Below -->

146
core/src/components/tabs/readme.md
View File

@ -307,59 +307,117 @@ will match the following tab:
### Vue
**Tabs.vue**
```html
<template>
<!-- Listen to before and after tab change events -->
<ion-tabs @IonTabsWillChange="beforeTabChange" @IonTabsDidChange="afterTabChange">
<ion-tab tab="schedule">
<Schedule />
</ion-tab>
<!-- Match by "app.speakers" route name -->
<ion-tab tab="speakers" :routes="'app.speakers'">
<Speakers />
</ion-tab>
<!-- Match by an array of route names -->
<ion-tab tab="map" :routes="['app.map', 'app.other.route']">
<Map />
</ion-tab>
<!-- Get matched routes with a helper method -->
<ion-tab tab="about" :routes="getMatchedRoutes">
<About />
</ion-tab>
<!-- Use v-slot:bottom with Vue ^2.6.0 -->
<template slot="bottom">
<ion-tab-bar>
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-page>
<ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/tabs/schedule">
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<!-- Provide a custom route to navigate to -->
<ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }">
<ion-icon name="person-circle"></ion-icon>
<ion-tab-button tab="speakers" href="/tabs/speakers">
<ion-icon :icon="personCircle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<!-- Provide extra data to route -->
<ion-tab-button tab="map" :to="{ name: 'app.map', params: { mode: 'dark' } }">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<!-- Provide custom click handler -->
<ion-tab-button tab="about" @click="goToAboutTab">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</template>
</ion-tabs>
</ion-tabs>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonIcon,
IonLabel,
IonPage,
IonTabBar,
IonTabButton,
IonTabs
} from '@ionic/vue';
import { calendar, personCircle } from 'ionicons/icons';
export default defineComponent({
components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs },
setup() {
const beforeTabChange = () => {
// do something before tab change
}
const afterTabChange = () => {
// do something after tab change
}
return {
calendar,
personCircle,
beforeTabChange,
afterTabChange
}
}
});
</script>
```
**Schedule.vue**
```html
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Schedule</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Schedule Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
});
</script>
```
**Speakers.vue**
```html
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Speakers</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Speakers Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
});
</script>
```

146
core/src/components/tabs/usage/vue.md
View File

@ -1,54 +1,112 @@
**Tabs.vue**
```html
<template>
<!-- Listen to before and after tab change events -->
<ion-tabs @IonTabsWillChange="beforeTabChange" @IonTabsDidChange="afterTabChange">
<ion-tab tab="schedule">
<Schedule />
</ion-tab>
<!-- Match by "app.speakers" route name -->
<ion-tab tab="speakers" :routes="'app.speakers'">
<Speakers />
</ion-tab>
<!-- Match by an array of route names -->
<ion-tab tab="map" :routes="['app.map', 'app.other.route']">
<Map />
</ion-tab>
<!-- Get matched routes with a helper method -->
<ion-tab tab="about" :routes="getMatchedRoutes">
<About />
</ion-tab>
<!-- Use v-slot:bottom with Vue ^2.6.0 -->
<template slot="bottom">
<ion-tab-bar>
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-page>
<ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/tabs/schedule">
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<!-- Provide a custom route to navigate to -->
<ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }">
<ion-icon name="person-circle"></ion-icon>
<ion-tab-button tab="speakers" href="/tabs/speakers">
<ion-icon :icon="personCircle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<!-- Provide extra data to route -->
<ion-tab-button tab="map" :to="{ name: 'app.map', params: { mode: 'dark' } }">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<!-- Provide custom click handler -->
<ion-tab-button tab="about" @click="goToAboutTab">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</template>
</ion-tabs>
</ion-tabs>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonIcon,
IonLabel,
IonPage,
IonTabBar,
IonTabButton,
IonTabs
} from '@ionic/vue';
import { calendar, personCircle } from 'ionicons/icons';
export default defineComponent({
components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs },
setup() {
const beforeTabChange = () => {
// do something before tab change
}
const afterTabChange = () => {
// do something after tab change
}
return {
calendar,
personCircle,
beforeTabChange,
afterTabChange
}
}
});
</script>
```
**Schedule.vue**
```html
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Schedule</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Schedule Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
});
</script>
```
**Speakers.vue**
```html
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Speakers</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Speakers Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }
});
</script>
```