Ionic Segment

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

  
   
   
   
   
  Ionic Segment 
   
  
  
   
   
   
  Phone 
   
   
   
  Gallery 
   
   
   
  Music 
   
   
   
   
   
  Call here 
  See photos 
  Play music 
   
   

Home.page.scss

 :root {
 --ion-safe-area-top: 25px;
 --ion-safe-area-bottom: 27px;
 }
 ion-slide {
 height: calc(110vh - 135px);
 } 

Home.page.ts

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

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