Ionic 2 中央圆形标签

Question

我正在开发一个带有选项卡导航的 Ionic 2 应用程序，如 Ionic 文档中所述：http://ionicframework.com/docs/components/#tabs-icon-text

选项卡栏有 5 个选项卡，我想突出中央选项卡，使其呈圆形，如下图所示。

我没有看到框架提供任何标准方法来做到这一点，使用 CSS 实现这一点的最简单方法是什么？

Answer 1

如果您使用最新的 Ionic 4，那么以下代码将完美完成工作，而无需使用任何额外的 css

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab2" >
      <ion-icon name="cog"  color="secondary"></ion-icon>
      <ion-label  color="secondary">Settings</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab1">
      <!-- <ion-icon name="cog" color="secondary"></ion-icon>
      <ion-label color="secondary">Settings</ion-label> -->
    </ion-tab-button>

    <ion-tab-button tab="tab3">
        <ion-icon name="information-circle" color="secondary"></ion-icon>
      <ion-label color="secondary">About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button color="secondary" (click)="gotoHome()">
        <ion-icon name="Home"></ion-icon>
    </ion-fab-button>
</ion-fab>

由于 fab 将位于选项卡按钮的顶部，因此它无法用于导航，因此您可以向其添加路由。我所做的是添加了一个 gotoHome 函数，它看起来像：

export class TabsPage {
  constructor(private router: Router) { }

  gotoHome(){
    this.router.navigateByUrl('/tabs/tab1')
  }
}

希望这可以帮助。