/
githubmirror
/
ionic
Обзор
Документация
Войти
/
githubmirror
/
ionic
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
packages/vue/test/base/src/views/TabsBasic.vue
55 строк
2 KB
Maria Hutt
feat(react, vue, angular): use tabs without router (#29794)
26 авг 2024, 18:13
Не верифицирован
26 авг 2024, 18:13
867066b
Код
Авторство
О чём код?
<template> <ion-page data-pageid="tabs"> <ion-content> <ion-tabs id="tabs" @ionTabsWillChange="onTabWillChange" @ionTabsDidChange="onTabDidChange"> <ion-tab-bar slot="bottom"> <ion-tab-button v-for="tab in tabs" :tab="'tab' + tab.id" :key="tab.id" > <ion-icon :icon="tab.icon" /> <ion-label>Tab {{ tab.id }}</ion-label> </ion-tab-button> </ion-tab-bar> <ion-tab tab="tab1" data-pageid="tab1"> <ion-label>Tab 1 Content</ion-label> </ion-tab> <ion-tab tab="tab2" data-pageid="tab2"> <ion-label>Tab 2 Content</ion-label> </ion-tab> <ion-tab tab="tab3" data-pageid="tab3"> <ion-label>Tab 3 Content</ion-label> </ion-tab> </ion-tabs> </ion-content> </ion-page> </template> <script lang="ts"> import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage, IonTab } from '@ionic/vue'; import { ellipse, square, triangle } from 'ionicons/icons'; import { ref, defineComponent } from 'vue'; export default defineComponent({ components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonTab }, setup() { const tabs = ref([ { id: 1, icon: triangle }, { id: 2, icon: ellipse }, { id: 3, icon: square } ]) const onTabWillChange = (e: { tab: string }) => { console.log('ionTabsWillChange', e.tab); } const onTabDidChange = (e: { tab: string }) => { console.log('ionTabsDidChange', e.tab); } return { tabs, onTabWillChange, onTabDidChange } } }); </script>