Theme ios Segment like md segment

Question

Am trying to style the Segment component on ios to be like the default style of Segment on Material Design in one of my ionic2 projects.

Can any one help giving the ideal method to do it?

Answer 1

You just need to set the mode attribute like this:

<ion-segment mode="md" [(ngModel)]="selectedTab">
    <ion-segment-button value="segment1">
        Segment 1
    </ion-segment-button>
    <ion-segment-button value="segment2">
        Segment
    </ion-segment-button>
</ion-segment>

If the segment is inside a ion-toolbar you can set the mode also there so the toolbar has the height that it has on Android:

<ion-toolbar mode="md">
    <ion-segment mode="md" [(ngModel)]="selectedTab">
        <ion-segment-button value="segment1">
            Segment 1
        </ion-segment-button>
        <ion-segment-button value="segment2">
            Segment
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

---

UPDATE

As Zhang Bruce mentioned in the comments, you have to add mode="md" for every segment button as well when using Ionic 4:

<ion-toolbar>
    <ion-segment mode="md" [(ngModel)]="selectedTab">
        <ion-segment-button mode="md" value="segment1">
            Segment 1
        </ion-segment-button>
        <ion-segment-button mode="md" value="segment2">
            Segment
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>