Ionic 4，带有中心按钮驼峰的选项卡菜单

Question

我只是想知道我们如何在选项卡菜单的中心创建一个按钮，例如：

尝试了一些测试，但无法得到与此相同或相似的结果。有什么帮助吗？

Answer 1

您需要使用 ion-fab 将垂直对齐设置为底部，将水平对齐设置为居中。通过一些额外的 css 规则，您可以获得与您显示的图像完全相同的图像。

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="albums-outline"></ion-icon>
      <ion-label>Albums</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="people-outline"></ion-icon>
      <ion-label>Accounts</ion-label>
    </ion-tab-button>

    <ion-tab-button></ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="card-outline"></ion-icon>
      <ion-label>Card</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
    <ion-icon name="add-outline"></ion-icon>
  </ion-fab-button>
</ion-fab>