Css 爱奥尼亚2中央圆形凸耳

我正在开发一个带有选项卡导航的Ionic 2应用程序，如Ionic的文档中所述

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

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

---

如果您的ion tabs组件中有5个选项卡，则可以使用ion tabs中的class.tab按钮将第三个选项卡元素作为目标，并根据需要设置其样式

---

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

您可以使用ion fab inside ion tab标签：

<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版本，不会导致任何位置问题，解决了常见问题

---

希望对您有所帮助：）

如果您使用的是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按钮会产生问题。

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

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