A segment is a collection of buttons, sometimes which are known as segmented controls. The segment buttons are displayed at horizontal rows. These segment buttons can be shown in a toolbar or the main content. Segments have tabs like features, in which you can select one tab and deselect all others.

Segments are useful to toggle between different views within the content. If you want to let the user move back and forth between separate pages in your app, you should use a tab bar instead of a segmented command. The segment can serve as a filter that shows or hides elements based on the value of the segments. By using the <ion-segment> component, you can create the ionic segment button inside the ionic application. In the ionic segment <ion-segment> component is used inside the <ion-content> component. You can also use the Angular’s ngModel in the ionic segment.

Ionic Segment Button

Segment buttons are a collection of related buttons within a segment. You can check the segment button by default by adding the attribute or by setting the segment value to the segment button value. You can select only one segment button at a time.

The following example explained that how you can use the ionic segment and segment buttons in the ionic application.

Example:

Home.page.html

Home.page.scss

Home.page.ts

Output: After executing this code, you will get the output, as shown below.

Ionic Segment

When you click the next segment, then it shows the following output  as shown below:

Ionic Segment 1

Pin It on Pinterest

Share This