Javascript 在离子4的自定义制表符PAR我怎么办？

我怎样才能在爱奥尼亚4中做那样的事情呢

---

所有的离子组件都只是网络组件。它们是用一种叫做。您可以使用此工具创建自定义选项卡栏，并将其发布到NPM上，然后将其导入到项目中。然而，复制爱奥尼亚现有选项卡布局的行为可能是一项困难的任务。

您可以重用爱奥尼亚的UI组件并重新设计它们的样式来完成这项任务，但中间曲线很难做到。我不认为用纯CSS就可以达到这种效果。我提出的最简单的解决方案是用所需的曲线绘制一个svg，并将其放置在工具栏的中间。这是一张工作票

离子工具栏{
--边框宽度：0！重要；
宽度：400px；
保证金：0自动；
边框左上半径：25px；
边框右上角半径：25px；
边框右下半径：15px；
边框左下半径：15px；
}
svg{
位置：绝对位置；
顶部：0px；
左：计算（50%-100px）；
} 

我使用在线绘图工具快速绘制路径和填充，使其与背景匹配

<ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="home"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
    </ion-buttons>

    <svg width="200" height="55"></svg>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="heart-empty"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="contact"></ion-icon>
      </ion-button>
    </ion-buttons>
</ion-toolbar>

 ion-toolbar {
    --border-width: 0 !important;
    width: 400px;
    margin: 0 auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
 }

  svg {
    position: absolute;
    top: 0px;
    left: calc(50% - 100px);
  }