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.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Ionic Segment</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" color="primary">
      <ion-segment-button value="0">
        <ion-label>Contact</ion-label>
        <ion-icon name="contact"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>Camera</ion-label>
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>Map</ion-label>
        <ion-icon name="pin"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  
  <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true">
    <ion-slide>First Segment</ion-slide>
    <ion-slide>Second Segment</ion-slide>
    <ion-slide>Third Segment</ion-slide>
  </ion-slides>
</ion-content>

Home.page.ts

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

import { Component, ViewChild} from '@angular/core';
import {IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('slides', { static: true }) slider: IonSlides;
  segment = 0;
  constructor() { }
  async segmentChanged(ev: any) {
    await this.slider.slideTo(this.segment);
  }
  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }
}

Home.page.scss

:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}
ion-slide {
  height: calc(100vh - 140px);
}

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.