Crear Scroll Horizontal en ion-segment IONIC2/3+
Frontend, Mobile, ProgramaciónAgregar 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.