0

estou desenvolvendo uma app em ionic, com isso, tenho uma pagina com tabs, mas pretendo colocar 10 tabs e não vai caber nos dispositivos, como colocar um scroll horizontal para as 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 Resposta 1

1

Ainda está com este problema? Consegui resolver hoje um parecido, no meu as tabs são dinâmicas, o usuário pode adicionar quantas quiser e excluir também.
Para resolver o problema adicionei um tamanho minimo para as tabs e adicionei scroll x da div que fica com as tabs.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .