How to use an ionic segment with an example

How to used Ionic segment change event ?

We have an ionChange event on the ionic segment. This event is emitted when the value property of the segment has changed and any dragging pointer has been released from ion-segment. The checked attribute in ion-segment-button didn’t work for the first time when the component is the load, to solve these issues we will set the default ion-segment value inside our component as.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  type = 'deposit';

  constructor() {}

  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

How to set default ion-segment-button in active state ?

When you have a few ion-segment-button and we can set the default ion-segment-button to a particular segment button. For that, we need to set the default active segment value in our component typescript. For our above example, we have set deposit as ionic segment default active segment by using ion-segment switch type value to deposit in ngOnInt method.

How to make Ionic segment scrollable ?

Ionic Segment components are not scrollable by default. Each segment width is determined by dividing the number of segment buttons by the screen width. Segment labels may get cut off when we have more numbers segments or segments have a longer label. We can solve this issue by using segment scrollable property to true or by adding attribute scrollable on the segment. This will cause the segment to scroll horizontally but will allow each segment button to have a variable width.

Apply CSS style to an Ionic segment

We can apply a different background color to the segment with help of Ionic CSS properties called –background. In our case, we have applied a warning color to the ionic segment background. Segment font color can be controlled by using color properties directly in the segment. Here’s a quick screenshot of how we can change the segment color of the font and background.

ion-segment {
  --background:#ffc409;
}

The ionic segment has only one CSS custom properties background and but we have lots of custom CSS properties for the ionic segment button which we will discuss later in this article. To edit the font color of the segment, apply color properties inside the segment.

  <ion-segment color="tertiary">
    <ion-segment-button value="deposit" checked>
      <ion-label>Deposit</ion-label>
      <ion-icon name="cash"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="loan">
      <ion-label>Loan</ion-label>
      <ion-icon name="log-out"></ion-icon>
    </ion-segment-button>
  </ion-segment>

We can ionic segment by using the following attribute values.

We have another example of how to customize the Ionic segment by applying CSS style on the ion-segment-button child component of the ion-segment. We can use any other HTML element or Ionic component with an ionic segment. Here is a gif image of our segment style.

We have three ionic segment buttons and we can apply CSS style for the Ionic segment and let edit home.page.html file.

<ion-content class="ion-padding">

  <ion-segment [(ngModel)]="segment" scrollable>
    <ion-segment-button value="first">
      First
    </ion-segment-button>
    <ion-segment-button value="second">
      Second
    </ion-segment-button>
    <ion-segment-button value="third">
      Three
    </ion-segment-button>
    <ion-segment-button value="first">
      First
    </ion-segment-button>
    <ion-segment-button value="second">
      Second
    </ion-segment-button>
    <ion-segment-button value="third">
      Three
    </ion-segment-button>
  </ion-segment>


  <div [ngSwitch]="segment">
    <ion-card *ngSwitchCase="'first'">
      <ion-card-header>
        First Content
      </ion-card-header>
      <ion-card-content>
        First Content here
      </ion-card-content>
    </ion-card>

    <ion-card *ngSwitchCase="'second'">
      <ion-card-header>
        Second Header
      </ion-card-header>
      <ion-card-content>
        Second content here
      </ion-card-content>
    </ion-card>

    <ion-card *ngSwitchCase="'third'">
      <ion-card-header>
        Third Header
      </ion-card-header>
      <ion-card-content>
        Third content
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

We need to import FormsModule in the app.module.ts file and let add segment component in our component template.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  segment = 'second';

  constructor() {}
}

Let edit the home.page.scss to apply style for our above segment.

ion-segment-button {
  --indicator-box-shadow: transparent !important;
  --background:white;
  --color:#2d2e87;
  --background-checked: linear-gradient(to right, #2d2e87, #0083CB)!important;
  --color-checked: white;
  border-radius: .5rem !important;
  padding: 2px;
  margin: 0;
}

The ionic segment button provides us with lots of custom CSS properties to apply different CSS styles for the segment button and here we have a list of custom CSS properties of the ionic segment button which we can use.

Conclusion
We have explored how to make an ionic segment with an example. We have also looked at how to control the segment style and I hope you got some idea of how to use the segment.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use ionic skeleton component.
• How to create a different ionic list.