Mettre 1 item sur 2 en couleur

Cette technique permet d’augmenter la lisibilité visuelle des listes longues.

Angular

@for (item of items; track $index) {
  <ion-item
    lines="none"
    [class.odd]="($index % 2 === 0)"
    [class.even]="($index % 2 !== 0)"
  >
    <ion-label>{{ item }}</ion-label>
  </ion-item>
}

CSS

.odd { --background: var(--ion-color-medium); }
.even { --background: #f16767; }

Ce n’est pas seulement un effet décoratif : sur des listes, des tableaux ou des écrans denses, ce type d’alternance améliore réellement le repérage visuel.

Aller plus loin

Articles liés