超过 4 个元素的离子标签栏

Question

我有一个 tabs 布局的应用程序。

我需要 tab-bar 中的六个 tab-buttons。超过 4/5 个元素的 space 不足。

所以我决定在ion-tab-bar元素中添加一个溢出元素。但即使在这里，标签的显示也不尽如人意。

请问您有更好的解决方案吗

    <ion-tabs>
  <ion-tab-bar slot="bottom" style="width: 100%; overflow-y: auto; overflow-x: auto;">

    <ion-tab-button tab="registrieren">
      <ion-icon name="person-add"></ion-icon>
      <ion-label>Registrieren</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="aufnahme">
      <ion-icon name="add-circle"></ion-icon>
      <ion-label>Aufnahme</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="entfernen">
      <ion-icon name="remove-circle"></ion-icon>
      <ion-label>Entfernen</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="standortwechsel">
      <ion-icon name="md-car"></ion-icon>
      <ion-label>Übergabe</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="admin-bestand">
      <ion-icon name="ios-albums"></ion-icon>
      <ion-label>Bestand</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="system">
      <ion-icon name="settings"></ion-icon>
      <ion-label>System</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

Answer 1

如果你有那么多 TABS，你能做的最好的事情就是改用 ion-segment。您可以更改样式，使其看起来像一个选项卡，并且可以使它们水平滑动。 ionic docs 组件上的示例看起来很难看，但您可以将它们制作为 TAB。希望我能帮忙。如果我没记错的话，宝马连接汽车的应用程序使用离子段作为顶部的选项卡，看起来非常好。

Answer 2

CSS

ion-tab-bar {
   overflow-x: scroll;
   justify-content: left;
}

超过 4 个元素的离子标签栏

Ionic Tab Bar More than 4 Elements

tabs

ionic-framework