Ionic 4/5 Ion Segment | Sliding Tabs Examples

The ion-segment UI components display buttons in a group of a horizontal row.

These button groups are switched on tap with a beautiful sliding effect in Android as well as IOS

IOS Segment Buttons

Android Segment Buttons

Slidable Segment in Toolbar

Ion Segment component can be used in the toolbar of the component page as shown below:

Ion Segment component provides input properties and events to configure its behavior:

Option Properties:

color: Background color can be changed using default and custom options "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".

disabled: Segment can be disabled by setting the disabled property to true.

mode: The style of the segment can be changed by setting type "ios" | "md"

scrollable: Segments can be scrolled horizontally if segments exceed the screen width.

value: To set a default button selected we can use value or [(ngModel)]


ionChange: Emitted when the value property has changed as shown in the example above.

Leave a Reply

Notify of