I have Tabs like so: Just an example. Doc:

CodePudding user response：

You could create a blank ion-tab-button and then create a custom element and stylize as you need to match your UI design.

    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="schedule">
          <ion-icon name="calendar"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="speakers">
          <ion-icon name="person-circle"></ion-icon>
        </ion-tab-button>

        <ion-tab-button></ion-tab-button>
    
        <ion-tab-button tab="about">
          <ion-icon name="information-circle"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="more">
          <ion-icon name="add"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
    <ion-fab vertical="bottom" horizontal="center" slot="fixed" edge="false">
      <ion-fab-button type="button">
         <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>

If you didn't want to use a ion-fab, you could create your own custom markup or component to manage the custom layout and style for middle button.