En esta ocasión les muestro como crear un componente de segmentos usando el sistema grid de ionic 4

Antes que nada les muestro el resultado:

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;
}
Categories: Ionic Framework

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *