Horizontally scrolling sub header in ionic 2

ionic-v1
8

In case somebody is still looking for this and also coming to this thread, I came up with this simple css solution in Ionic 2 RC4. Did not test it on real devices yet, but in browser it looks ok so far:

ion-toolbar.scrollable-segments {
	ion-segment {
	  display: block;
	  overflow-x: scroll;
	  white-space: nowrap;

	  ion-segment-button.segment-button {
		display: inline-block;
		width: auto;
	  }
	}
}

template:

<ion-toolbar no-border class="scrollable-segments">
    <ion-segment [(ngModel)]="segment">
        <ion-segment-button value="all">
            All
        </ion-segment-button>
        <ion-segment-button value="test">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test2">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test3">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test4">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test5">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test6">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test7">
            Recent
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>
6 Likes