48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-tabs>
|
|
<ion-router-outlet />
|
|
<ion-tab-bar slot="bottom">
|
|
<ion-tab-button tab="home" href="/layout/home">
|
|
<div class="flex-col-center gap-1">
|
|
<ion-icon aria-hidden="true" :icon="compass" class="icon" />
|
|
<ion-label>{{ t('tabs.home') }}</ion-label>
|
|
</div>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="notify" href="/layout/notify">
|
|
<div class="flex-col-center gap-1">
|
|
<ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
|
|
<ion-label>{{ t('tabs.notify') }}</ion-label>
|
|
</div>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="user" href="/layout/user">
|
|
<div class="flex-col-center gap-1">
|
|
<ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
|
|
<ion-label>{{ t('tabs.user') }}</ion-label>
|
|
</div>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
</ion-tabs>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
ion-tab-bar {
|
|
height: 60px;
|
|
--background: var(--ion-background-color);
|
|
box-shadow: 0px 0px 12px var(--ion-color-tertiary);
|
|
padding-bottom: var(--ion-safe-area-bottom);
|
|
}
|
|
.icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|