45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
|
|
</script>
|
|
|
|
<template>
|
|
<IonPage>
|
|
<IonTabs>
|
|
<IonRouterOutlet />
|
|
<IonTabBar slot="bottom" class="tabbar">
|
|
<IonTabButton tab="riwa" href="/layout/riwa">
|
|
<IonIcon aria-hidden="true" :icon="compass" />
|
|
<IonLabel>Riwa</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="market" href="/layout/market">
|
|
<IonIcon aria-hidden="true" :icon="cellular" />
|
|
<IonLabel>Market</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="trade" href="/layout/trade">
|
|
<IonIcon aria-hidden="true" :icon="swapHorizontal" />
|
|
<IonLabel>Trade</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="chat" href="/layout/chat">
|
|
<IonIcon aria-hidden="true" :icon="chatboxEllipses" />
|
|
<IonLabel>Chat</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="user" href="/layout/user">
|
|
<IonIcon aria-hidden="true" :icon="personCircle" />
|
|
<IonLabel>User</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
</IonPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tabbar {
|
|
height: 60px;
|
|
--background: var(--ion-background-color);
|
|
}
|
|
</style>
|