Ionic - 8.16 Filtrer les lieux avec des boutons segmentés

La page de découverte doit proposer deux modes : voir tous les lieux, ou seulement ceux qui sont réservables. Les boutons segmentés permettent ce filtre, où un seul bouton est actif à la fois. Cette leçon les ajoute en haut de la page et récupère la valeur du bouton choisi.

Ajouter le composant ion-segment

Le composant ion-segment se place en haut du contenu. Il peut aussi être placé dans une grille, selon le design voulu. À l'intérieur, chaque ion-segment-button accepte un libellé ou une icône, comme un bouton classique.

Chaque bouton reçoit une value, qui permet de reconnaître celui qui a été cliqué. La vidéo utilise all pour afficher tous les lieux, et bookable pour les lieux réservables. Le bouton sélectionné par défaut est fixé avec l'attribut value du segment.

<ion-segment value="all" (ionChange)="onFilterUpdate($event)">
  <ion-segment-button value="all">
    <ion-label>Tous</ion-label>
  </ion-segment-button>
  <ion-segment-button value="bookable">
    <ion-label>Réservables</ion-label>
  </ion-segment-button>
</ion-segment>

Récupérer la valeur sélectionnée

L'événement ionChange transmet la valeur du bouton choisi. La méthode du fichier TypeScript reçoit cet événement, typé CustomEvent avec un SegmentChangeEventDetail. Le nom de la méthode est libre.

Dans la vidéo, la méthode affiche event.detail dans la console. Au chargement, la valeur par défaut apparaît. Un clic sur l'autre bouton fait apparaître la nouvelle valeur.

onFilterUpdate(event: CustomEvent<SegmentChangeEventDetail>) {
  console.log(event.detail);
}

En résumé

ion-segment ajoute un filtre à boutons, dont un seul est actif. Chaque ion-segment-button porte une value, et l'événement ionChange transmet le choix. La méthode lit ensuite cette valeur pour filtrer les lieux. La vidéo affiche la valeur dans la console pour vérifier le fonctionnement.

Points clés

• ion-segment regroupe des boutons dont un seul est actif.
• Chaque ion-segment-button porte une value pour être reconnu.
• L'attribut value du segment fixe le bouton par défaut.
• ionChange transmet la valeur du bouton choisi.
• La méthode lit event.detail pour connaître la valeur.

Questions fréquentes

Un seul bouton peut-il être actif à la fois ?

Oui. Le composant segment ne permet qu'une seule sélection à la fois.

Comment savoir quel bouton a été cliqué ?

Grâce à la valeur de chaque bouton. La méthode reçoit l'événement ionChange, et event.detail contient cette valeur.

Faut-il placer le segment dans une grille ?

Non, ce n'est pas obligatoire. Cela dépend du design voulu.