How to create super tabs in ionic 4?

How to create super tabs in ionic 4? Anyone can help?

Hello, Please don’t just put only question, add what you try it, share sample code to understand other user so that way they can able to give you answer.

Actually i try to create super tabs in ionic 4 but it is not working but you can get view like super tabs using segment

  <ion-segment-button value="0" >
    <!-- <ion-icon name="person"></ion-icon> -->
    <p>Created Channels</p>
  </ion-segment-button>
  <ion-segment-button value="1">
    <!-- <ion-icon name="camera"></ion-icon> -->
    <p>Create Channel</p>
  </ion-segment-button>
  <ion-segment-button value="2">
    <!-- <ion-icon name="camera"></ion-icon> -->
   <p>subscription</p>
  </ion-segment-button>
</ion-segment>

<ion-slides #slides (ionSlideDidChange)=“slideChanged()” scrollbar=“true” no-padding>


<ion-item *ngFor=“let q of users1” (click)=“messagecount(q);” style=“background-color:rgb(237, 247, 255);”>



{{q.channel_name}}

           <p style="color: blue" *ngIf="q.messageCount > 0" >{{q.messageCount}}&nbsp;&nbsp;new Messages</p>
        </ion-item>
        <p style="color:#000;text-align: center;padding: 4px;" *ngIf="users1.length == 0" > please Join channels to view Messages </p>
      </ion-list>
</ion-slide>
<ion-slide>

</ion-slide>
<ion-slide>
  third
</ion-slide>
If i add text in segment button the alignments are like above ? how to arrange properly?
1 Like

Hi,

I’m looking for a solution to have Super Tab working on Ionic 4 too. Anyone has any ideas?

Thanks.

  <ion-segment-button value="0" style="color: white" >
   
    <span style="text-transform: none;">Created</span>
    <span style="text-transform: none;">channels</span>
  </ion-segment-button>
  <ion-segment-button value="1" style="color: white">
   
      <span style="text-transform: none;">Create</span>
      <span style="text-transform: none;">channels</span>
  </ion-segment-button>
  <ion-segment-button value="2" style="color: white">
    
    <span style="text-transform: none;">subscription</span>
  </ion-segment-button>
</ion-segment>