Crear Scroll Horizontal en ion-segment IONIC2/3+

Frontend, Mobile, Programación

Agregar scroll horizontal a un ion-segment,  es bastante sencillo, sólo basta con agregar el siguiente código CSS :


ion-segment.my-segment {
  justify-content: flex-start !important;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  ion-segment-button.segment-button {
    flex: 1 0 auto;
    min-width: 100px !important;
    width: auto !important;
    max-width: 300px !important;
  }
}

La explicación del siguiente trozo de código es el siguiente:


 ion-segment-button.segment-button {
    flex: 1 0 auto; 
    min-width: 100px !important; 
    width: auto !important;
    max-width: 300px !important; 
  }

Este trozo de código da tamaño mínimo y máximo al segment-button, para que todas las pestañas tenga un tamaño flexible.