feat: a little fun with the tab bar

Use translucent and fab-button
FL0R1AN84 · Dec 18, 2023 · 6daf8e1 · 6daf8e1
1 parent 8c8ba01
commit 6daf8e1
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/views/TabsPage.vue b/src/views/TabsPage.vue
@@ -2,15 +2,18 @@
   <ion-page>
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
-      <ion-tab-bar slot="bottom">
+      <ion-tab-bar slot="bottom" translucent>
         <ion-tab-button tab="tab1" href="/tabs/tab1">
           <ion-icon aria-hidden="true" :icon="contrastOutline" />
           <ion-label>Mode</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab2" href="/tabs/tab2">
-          <ion-icon aria-hidden="true" :icon="chevronExpandOutline" />
-          <ion-label>Modal</ion-label>
+          <ion-fab>
+            <ion-fab-button>
+              <ion-icon aria-hidden="true" :icon="chevronExpandOutline" />
+            </ion-fab-button>
+          </ion-fab>
         </ion-tab-button>
 
         <ion-tab-button tab="tab3" href="/tabs/tab3">
@@ -24,6 +27,8 @@
 
 <script setup lang="ts">
 import {
+  IonFab,
+  IonFabButton,
   IonIcon,
   IonLabel,
   IonPage,
@@ -38,3 +43,9 @@ import {
   contrastOutline
 } from 'ionicons/icons'
 </script>
+
+<style scoped>
+ion-tab-bar {
+  height: 75px;
+}
+</style>