Sélecteur segmenté

Bascule d'options mutuellement exclusives, typique des scénarios de changement de vue.

Utilisation de base

Utilisation de base

<script setup>
import { ref } from 'vue'
const view = ref('Liste')
</script>

<template>
  <LhSegmented v-model="view" :options="['Liste', 'Cartes', 'Tableau']" />
</template>

<script>
export default {
  data() {
    return { view: 'Liste' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['Liste', 'Cartes', 'Tableau']" />
</template>

Éléments désactivés et block

Élément désactivé

<script setup>
import { ref } from 'vue'
const seg = ref('day')
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'Jour', value: 'day' }, { label: 'Semaine', value: 'week' }, { label: 'Mois', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { seg: 'day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'Jour', value: 'day' }, { label: 'Semaine', value: 'week' }, { label: 'Mois', value: 'month', disabled: true }]"
  />
</template>

La prop disabled au niveau du composant désactive l'ensemble du sélecteur.

Sélecteur entièrement désactivé

<script setup>
import { ref } from 'vue'
const segDisabled = ref('A')
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['A', 'B', 'C']"
  />
</template>

<script>
export default {
  data() {
    return { segDisabled: 'A' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['A', 'B', 'C']"
  />
</template>

API

LhSegmented Props

Prop	Description	Type	Valeur par défaut
modelValue	Valeur actuelle (v-model contrôlé)	string | number	—
options	Options (forme courte par chaîne ou objet)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	Désactiver tout le sélecteur	boolean	false
block	Remplir le conteneur	boolean	false
sx	Props de mise en page sx	LhSxProps	—

Events

Événement	Description	Callback
update:modelValue	Émis lorsque la sélection change, à utiliser avec v-model	(value: string | number)
change	Émis lorsque la sélection change (clic et flèches directionnelles)	(value: string | number)

Accessibilité

• role="radiogroup" + role="radio" pour les options + aria-checked
• Roving tabindex : déplacement par flèches directionnelles (les éléments désactivés sont ignorés, boucle premier/dernier), Tab n'atteint que l'élément portant le focus
• Le fond de l'élément sélectionné passe par une transition de variables CSS

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/segmented/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhSegmentedProps

export interface LhSegmentedProps {
  /** Valeur actuelle (v-model contrôlé) */
  modelValue?: LhSegmentedValue
  /** Options (forme courte par chaîne ou objet) */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** Remplir le conteneur */
  block?: boolean
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSegmentedValue _{(provenant de @lh-ui/share/core/segmented)}

/** Type de la valeur d'une option */
export type LhSegmentedValue = string | number

LhSegmentedInput _{(provenant de @lh-ui/share/core/segmented)}

/** Option en entrée (forme courte par chaîne ou objet) */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

LhSegmentedOption _{(provenant de @lh-ui/share/core/segmented)}

/** Forme objet d'une option */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}