Javatpoint Logo
Javatpoint Logo

Ionic Segment

Segments are a collection of related buttons that displayed in a horizontal row. It can be placed inside of a toolbar or the main content. The functionality of the Ionic segment is the same as Ionic tabs, where you select the one tab that will deselect all other tabs.

The segment component is useful when the user toggle between different views inside of the content. The tab bar should be used instead of a segment when clicking on control should navigate between pages in your app. A Segment can act as a filter, which shows or hide the elements based on the segment's value. We can access the Ionic Segment by using the standard <ion-segment> element.

The following example provides a detailed explanation about how you can use segments with your Ionic application.

Example

Home.page.html

This page is used to display the content for the user view. Here, we are going to use <ion-segment> inside of the <ion-content> element. The option inside the segment, such as ionChange, calls the event to change the segment tab, and ngModel is an angular directive that binds the value of HTML control to application data.

Home.page.ts

This page contains the code for changing the segment tab and slide option.

Home.page.scss

Output

When you execute the above Ionic application, it will give the following output. Here, you can see the three types of segment contacts, camera, and map. By default, the first segment is always selected.

Ionic Segment

Now, when you select the map segment, the following output appears on the screen.

Ionic Segment
Next TopicIonic Select




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA