90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
|
<ion-page>
|
|
<ion-content>
|
|
<ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
|
|
<ion-router-outlet />
|
|
<ion-tab-bar slot="bottom">
|
|
<ion-tab-button tab="home" href="/tabs/home">
|
|
<ion-icon :icon="walletOutline"></ion-icon>
|
|
<ion-label>Wallet</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="accounts" href="/tabs/accounts">
|
|
<ion-icon :icon="personCircle"></ion-icon>
|
|
<ion-label>Accounts</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="networks" href="/tabs/networks">
|
|
<ion-icon :icon="gitNetworkOutline"></ion-icon>
|
|
<ion-label>Networks</ion-label>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
<ion-tab-bar slot="bottom">
|
|
<ion-tab-button tab="history" href="/tabs/history">
|
|
<ion-icon :icon="receiptOutline"></ion-icon>
|
|
<ion-label>History</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="assets" href="/tabs/assets">
|
|
<ion-icon :icon="diamondOutline"></ion-icon>
|
|
<ion-label>Assets</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="settings" href="/tabs/settings">
|
|
<ion-icon :icon="cogOutline"></ion-icon>
|
|
<ion-label>Settings</ion-label>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
</ion-tabs>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import {
|
|
IonPage,
|
|
IonContent,
|
|
IonRouterOutlet,
|
|
IonTabs,
|
|
IonTabBar,
|
|
IonTabButton,
|
|
IonLabel,
|
|
IonIcon
|
|
} from "@ionic/vue";
|
|
import { personCircle, walletOutline, diamondOutline, cogOutline, receiptOutline, gitNetworkOutline } from "ionicons/icons";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
IonPage,
|
|
IonContent,
|
|
IonRouterOutlet,
|
|
IonTabs,
|
|
IonTabBar,
|
|
IonTabButton,
|
|
IonLabel,
|
|
IonIcon
|
|
},
|
|
name: "AppTabs",
|
|
setup() {
|
|
const beforeTabChange = () => {
|
|
// do something before tab change
|
|
};
|
|
const afterTabChange = () => {
|
|
// do something after tab change
|
|
};
|
|
|
|
return {
|
|
walletOutline,
|
|
personCircle,
|
|
diamondOutline,
|
|
cogOutline,
|
|
receiptOutline,
|
|
gitNetworkOutline,
|
|
beforeTabChange,
|
|
afterTabChange,
|
|
};
|
|
},
|
|
});
|
|
</script>
|