Ionic 2 Central Rounded Tab

Question

我正在开发一个带有标签导航的Ionic 2应用程序，如http://ionicframework.com/docs/components/#tabs-icon-text

中Ionic的文档中所述

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

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

Answer 1

如果您的离子选项卡组件中有5个选项卡，则可以使用ion-tabs中的类.tab按钮定位第三个选项卡元素，并以您想要的任何方式设置样式。

请记住，默认情况下，Ionic会根据设备的操作系统对其组件应用不同的样式。编写自定义SCSS规则时，请确保同时定位所有样式模式。我不知道您的特定情况是什么，但您始终可以强制应用程序以特定模式（md，ios，windows）运行，并且所有组件在操作系统中看起来都相同。通过这样做，您可以实现应用程序外观的一致性，您只需要针对一种样式模式。

Answer 2

如果您使用的是最新的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>

由于晶圆厂将位于选项卡按钮的顶部，因此无法进行导航，因此您可以为其添加路由。我所做的是添加了gotoHome函数，它看起来像：

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

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

希望这会有所帮助。

Answer 3

你可以在ion-tab标签内使用ion-fab：

<ion-tabs>
<ion-tab tabIcon="icon-1"></ion-tab>
<ion-tab tab-icon="icon-2"></ion-tab>
<ion-tab tab-icon="don't mention any icon"></ion-tab>
<ion-fab>
   <button ion-fab center bottom style="background: url("set the url of your round svg icon");"></button>
</ion-tab>
<ion-tab tabIcon="icon-3"></ion-tab>
<ion-tab tabIcon="icon-4"></ion-tab>
</ion-tabs>

注意：您必须不将图标添加到选项卡图标，因为它将被替换为fab按钮。

此解决方案适用于ios版本，不会导致位置修复常见问题。

希望这会有所帮助:)