Segmented control

The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.

<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" icon="remove"></mbsc-segmented>
    <mbsc-segmented value="2" icon="pencil"></mbsc-segmented>
    <mbsc-segmented value="3" icon="plus"></mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1">Option 1</mbsc-segmented>
    <mbsc-segmented value="2">Option 2</mbsc-segmented>
    <mbsc-segmented value="3">Option 3</mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" startIcon="remove">Option 1</mbsc-segmented>
    <mbsc-segmented value="2" startIcon="pencil">Option 2</mbsc-segmented>
    <mbsc-segmented value="3" startIcon="plus">Option 3</mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="individual">
    <mbsc-segmented value="day" [(ngModel)]="range">Day</mbsc-segmented>
    <mbsc-segmented value="week" [(ngModel)]="range">Week</mbsc-segmented>
    <mbsc-segmented value="month" [(ngModel)]="range">Month</mbsc-segmented>
    <mbsc-segmented value="year" [(ngModel)]="range">Year</mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="ngmodel" [(ngModel)]="range">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="binding" [(value)]="range">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>

<mbsc-segmented-group name="uncontrolled">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month" checked>Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>

myGroupItems: Array<{ checked: boolean, text: string, value: string }> = [
    { checked: false, text: 'S', value: 'sunday' }, 
    { checked: true, text: 'M', value: 'monday' }, 
    { checked: false, text: 'T', value: 'tuesday' },
    { checked: false, text: 'W', value: 'wednesday' },
    { checked: true, text: 'T', value: 'thursday' },
    { checked: false, text: 'F', value: 'friday' },
    { checked: false, text: 'S',value: 'saturday' }
]

<mbsc-segmented-group select="multiple" name="multi">
    <mbsc-segmented *ngFor="let item of myGroupItems" [(value)]="item.value" [(checked)]="item.checked">{{item.text}}</mbsc-segmented>
</mbsc-segmented-group>

Using with Ionic

The Segmented component can be used tha same way with Ionic, as any other angular component.

Options

mbsc-segmented-group

mbsc-segmented

<div class="mbsc-icon mbsc-icon-star"></div>

For many more examples - simple and complex use-cases - check out the segmented demos for angular.

Segmented theming

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Windows theme

The following variables are specific to the Windows theme light variant:

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Material theme

The following variables are specific to the Material theme light variant:

Material Dark theme

The following variables are specific to the Material theme dark variant:

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.