Ionic6 mid-button效果实现

简单实现这种mid-button

<1> tabs.page.html

<ion-tabs>

  <ion-fab vertical="bottom" horizontal="center" translucent="true">

    <ion-fab-button (click)="onClick()">

      <ion-icon name="camera"></ion-icon>

    </ion-fab-button>

  </ion-fab>

<ion-tab-bar slot="bottom" class="ion-no-border">

    <ion-tab-button tab="tab1">

      <ion-icon name="triangle"></ion-icon>

      <ion-label>Tab 1</ion-label>

    </ion-tab-button>

    <ion-tab-button tab="tab2" class="comments">

      <ion-icon name="ellipse"></ion-icon>

      <ion-label>Tab 2</ion-label>

    </ion-tab-button>



    <svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg">

      <path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd">

      </path>

    </svg>

    <ion-tab-button tab="tab3" class="notifs">

      <ion-icon name="square"></ion-icon>

      <ion-label>Tab 3</ion-label>

    </ion-tab-button>

    <ion-tab-button tab="mine">

      <ion-icon name="person"></ion-icon>

      <ion-label>Mine</ion-label>

    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

<2> tabs.page.scss

ion-tabs {

    ion-fab {

        margin-bottom: env(safe-area-inset-bottom);

        /* fix notch ios*/

        ion-fab-button {

            --box-shadow: none;

        }

    }

    ion-tab-bar {

        --border: 0;

        --background: transparent;

        position: absolute;

        height: 50px;

        bottom: 0;

        left: 0;

        right: 0;

        width: 100%;

        &:after {

            content: " ";

            width: 100%;

            bottom: 0;

            background: var(--ion-color-light);

            height: env(safe-area-inset-bottom);

            position: absolute;

        }

        ion-tab-button {

            --background: var(--ion-color-light);

        }

        ion-tab-button.comments {

            margin-right: 0px;

            border-top-right-radius: 18px;

        }

        ion-tab-button.notifs {

            margin-left: 0px;

            border-top-left-radius: 18px;

        }

        svg {

            width: 75px;

            margin-top: 11px;

            path {

                fill: var(--ion-color-light);

            }

        }

    }

}