Custom Segments Ionic 4

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-grid>
      <ion-row>
        <ion-col size="4" tappable (click)="changeSegment('pets')" [ngClass]="{'active': segment == 'pets'}">
          <div>Pets</div>
        </ion-col>
        <ion-col size="4" tappable (click)="changeSegment('food')" [ngClass]="{'active': segment == 'food'}">
          <div>Food</div>
        </ion-col>
        <ion-col size="4" tappable (click)="changeSegment('cars')" [ngClass]="{'active': segment == 'cars'}">
          <div>Cars</div>
        </ion-col>
      </ion-row>
    </ion-grid>
</div>

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 *