How to add scroll in ion-tabs with various tab?

Asked

Viewed 336 times

0

I am developing an app in Ionic, with this, I have a page with tabs, but I intend to put 10 tabs and will not fit in the devices, how to put a horizontal scroll to the tabs?

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
   <!-- Tab 1 content -->
  </ion-tab> 

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>
  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 3 content -->
  </ion-tab>
  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 4 content -->
  </ion-tab>
  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 5 content -->
  </ion-tab>
  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
  </ion-tab>
</ion-tabs>

1 answer

1

Are you still having this problem? I managed to solve a similar one today, in my tabs are dynamic, the user can add as many as he wants and delete as well.
To solve the problem I added a minimum size to the tabs and added scroll x to the div that keeps the tabs.

.tab-item{
    min-width: 90px;
}
.tabs{
    overflow-x: scroll;
    overflow-y: hidden;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.