在 ionic ion-tabs 加上 ion-fab

原本的設計中在底部會有一個點擊後開始遛狗的按鈕，作用是計時與紀錄路徑、公里數，但卻不知道要如何在底部的 ion-tabs 中加入 ion-fab，搜尋了一些資訊後，發現其他人的做法是在 tabs 中加入空的 tab button 然後再把 fab 加進去。以下為示範程式碼，怕太複雜所以我有拔掉一些自己的其他設定(顏色、點選的事件與行為)，也要記得使用 Ionic 的 component 與 ionicons 都要各別 import 到程式碼中喔！

• 首先在 Ionic ion-tabs component 的頁面中，正中間加入一個空的 ion-tab-button
  

  <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
          <ion-tab-button tab="map" href="/tabs/map">
          <ion-icon :icon="location"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="notify" href="/tabs/notify">
          <ion-icon :icon="notifications"></ion-icon>
          </ion-tab-button>
          <ion-tab-button></ion-tab-button>
          <ion-tab-button tab="follow" href="/tabs/follow">
          <ion-icon :icon="star"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="profile" href="/tabs/profile">
          <ion-icon :icon="person"></ion-icon>
          </ion-tab-button>
      </ion-tab-bar>
      </ion-tabs>
  

• 在 ion-tabs 的外層寫入 ion-fab，現在在左上角有一個 ion-fab
  

  <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
          <ion-tab-button tab="map" href="/tabs/map">
          <ion-icon :icon="location"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="notify" href="/tabs/notify">
          <ion-icon :icon="notifications"></ion-icon>
          </ion-tab-button>
          <ion-tab-button></ion-tab-button>
          <ion-tab-button tab="follow" href="/tabs/follow">
          <ion-icon :icon="star"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="profile" href="/tabs/profile">
          <ion-icon :icon="person"></ion-icon>
          </ion-tab-button>
      </ion-tab-bar>
      </ion-tabs>
      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
      <ion-fab-button>
          <ion-icon :icon="paw"></ion-icon>
      </ion-fab-button>
      </ion-fab>
  

• 然後加入vertical="bottom" horizontal="center" slot="fixed" 讓 ion-fab 出現在正下方，這樣就完成了～
  

  <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
          <ion-tab-button tab="map" href="/tabs/map">
          <ion-icon :icon="location"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="notify" href="/tabs/notify">
          <ion-icon :icon="notifications"></ion-icon>
          </ion-tab-button>
          <ion-tab-button></ion-tab-button>
          <ion-tab-button tab="follow" href="/tabs/follow">
          <ion-icon :icon="star"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="profile" href="/tabs/profile">
          <ion-icon :icon="person"></ion-icon>
          </ion-tab-button>
      </ion-tab-bar>
      </ion-tabs>
      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
      <ion-fab-button>
          <ion-icon :icon="paw"></ion-icon>
      </ion-fab-button>
      </ion-fab>
  

  如果各位有更好的做法也可以跟我分享！