Selector segmentado

Control segmentado. Las opciones admiten la forma abreviada de cadena de texto y la forma de objeto { value, label, disabled }; block expande la anchura al contenedor.

Selector segmentado

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['Lista', 'Cuadrícula', 'Galería']" />
    <p class="demo-note">Forma abreviada de matriz de cadenas: {{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">Forma de objeto (con un elemento disabled): {{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['Lista', 'Cuadrícula', 'Galería']" disabled />
    <LhSegmented v-model="view" :options="['Lista', 'Cuadrícula', 'Galería']" block />
    <p class="demo-note">block expande la anchura al contenedor</p>
  </div>
</template>

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

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valor actual (model: modelValue/input)	string \| number	—
options	Opciones (cadena u objeto; obligatorio)	(string \| number \| { value, label, disabled? })[]	—
disabled	Deshabilitar el control entero	boolean	false
block	Expandir la anchura al contenedor	boolean	false
sx	Propiedad de diseño rápido sx	—	—

Eventos

input (v-model, parámetro (val)), change (val).

Accesibilidad

El elemento raíz usa role="radiogroup"; cada elemento, role="radio" + aria-checked; las teclas ←/→ cambian de elemento.