Ionic 5|4 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

Ionic 5|4 Ion Segment, Sliding Tabs Examples

Android Segment Buttons

Ionic 5|4 Ion Segment, Sliding Tabs Examples

Slidable Segment in Toolbar

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

Ionic 5|4 Ion Segment, Sliding Tabs Examples

<ion-header [translucent]="true">

  <ion-toolbar>
    <ion-title>
      Ionic Segments
    </ion-title>
  </ion-toolbar>

  <ion-toolbar color="primary">

    <ion-segment 
    value="all" 
    color="tertiary" 
    scrollable="true"
    mode="ios"
    [(ngModel)]="segmentModel" 
    (ionChange)="segmentChanged($event)">

      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>

      <ion-segment-button value="favorites">
        <ion-label>Favorites</ion-label>
      </ion-segment-button>

      <ion-segment-button value="settings">
        <ion-label>Settings</ion-label>
      </ion-segment-button>

      <ion-segment-button value="profile">
        <ion-label>Profile</ion-label>
      </ion-segment-button>

      <ion-segment-button value="just">
        <ion-label>Just</ion-label>
      </ion-segment-button>

      <ion-segment-button value="onemore">
        <ion-label>One More</ion-label>
      </ion-segment-button>

      <ion-segment-button value="tofill">
        <ion-label>To Fill</ion-label>
      </ion-segment-button>

    </ion-segment>
    
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <ion-card *ngIf="segmentModel === 'all'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>All</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>
  
  <ion-card *ngIf="segmentModel === 'favorites'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>Favorites</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>
  
  <ion-card *ngIf="segmentModel === 'profile'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>Profile</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="segmentModel === 'settings'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>Settings</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="segmentModel === 'just'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>Just</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="segmentModel === 'onemore'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>One More</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="segmentModel === 'tofill'">
    <ion-card-header>
      <ion-card-subtitle>Segment Content</ion-card-subtitle>
      <ion-card-title>To Fill</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content>
  </ion-card>
  
</ion-content>
// home.page.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  segmentModel = "favorites";

  constructor(
  ) { }

  ngOnInit() {

  }

  segmentChanged(event){
    console.log(this.segmentModel);
    
    console.log(event);
  }

}

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)]

Events

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments