Sélecteur segmenté

Contrôle segmenté. Les options s'écrivent sous forme de chaînes (syntaxe raccourcie) ou d'objets { value, label, disabled } ; block permet d'occuper toute la largeur du conteneur.

Sélecteur segmenté

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['Liste', 'Grille', 'Galerie']" />
    <p class="demo-note">Syntaxe raccourcie par tableau de chaînes : {{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">Syntaxe en objets (avec un élément disabled) : {{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['Liste', 'Grille', 'Galerie']" disabled />
    <LhSegmented v-model="view" :options="['Liste', 'Grille', 'Galerie']" block />
    <p class="demo-note">block : occupe toute la largeur du conteneur</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: 'Liste',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: 'Tang' },
      { value: 'song', label: 'Song' },
      { value: 'yuan', label: 'Yuan' },
      { value: 'ming', label: 'Ming', disabled: true },
    ],
  }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur actuelle (model : modelValue/input)	string \| number	—
options	Options (chaînes ou objets, obligatoire)	(string \| number \| { value, label, disabled? })[]	—
disabled	Désactive l'ensemble	boolean	false
block	Occupe toute la largeur du conteneur	boolean	false
sx	Raccourci de mise en page sx	—	—

Events

input (v-model, paramètre (val)), change (val).

Accessibilité

L'élément racine porte role="radiogroup", chaque élément role="radio" + aria-checked ; les flèches ←/→ du clavier permettent de basculer.