Change appearance of only 1 tab on the Ionic

Issue

I have Tabs like so: Just an example. Doc: https://ionicframework.com/docs/api/tabs

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>
  

    <ion-tab-button tab="about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Do you know how to create a bigger and rounded top tab like so on the 3rd one? i.e. middle one.

I have tried to change the height and border-radius. But none of them worked. Any clue, please?

Extracted from Adobe XD:

Solution

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.

Answered By - zeropsi