Today i show you how to create a custom segment using ionic grid system

First of all I show you the result:

Codigo HTML

<div class="custom-segment">
        <ion-col size="4" tappable (click)="changeSegment('pets')" [ngClass]="{'active': segment == 'pets'}">
        <ion-col size="4" tappable (click)="changeSegment('food')" [ngClass]="{'active': segment == 'food'}">
        <ion-col size="4" tappable (click)="changeSegment('cars')" [ngClass]="{'active': segment == 'cars'}">

Codigo SCSS

.custom-segment {
    border-radius: 3px;
    background: var(--ion-color-custom);

    ion-col {
        padding: 10px 0;
        border-radius: 3px;

        div {
            text-align: center;
            color: var(--ion-color-custom-contrast);

        &.active {
            background: var(--ion-color-custom-contrast);
            div {
                color: var(--ion-color-custom);


Codigo TypeScript

segment: string = "food";
changeSegment (segment: string) {
    this.segment = segment;


Leave a Reply

Your email address will not be published. Required fields are marked *