Selector segmentado

Conmutador de opciones excluyentes, típico de escenas de conmutación de vista.

Uso básico

Uso básico

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

<template>
  <LhSegmented v-model="view" :options="['Lista', 'Tarjetas', 'Tabla']" />
</template>

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

<template>
  <LhSegmented v-model="view" :options="['Lista', 'Tarjetas', 'Tabla']" />
</template>

Elemento deshabilitado y block

Elemento deshabilitado

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

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'Día', value: 'day' }, { label: 'Semana', value: 'week' }, { label: 'Mes', value: 'month', disabled: true }]"
  />
</template>

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

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'Día', value: 'day' }, { label: 'Semana', value: 'week' }, { label: 'Mes', value: 'month', disabled: true }]"
  />
</template>

El disabled a nivel de componente deshabilita todo el selector.

Grupo entero deshabilitado

<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	Descripción	Tipo	Predeterminado
modelValue	Valor actual (v-model controlado)	string | number	—
options	Opciones (escritura abreviada en forma de cadena u objeto)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	Grupo entero deshabilitado	boolean	false
block	Ocupa todo el ancho del contenedor	boolean	false
sx	Props de maquetación rápida sx	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
update:modelValue	Se dispara al cambiar la opción seleccionada; se usa con v-model	(value: string | number)
change	Se dispara al cambiar la opción seleccionada (tanto con clic como con las teclas de dirección)	(value: string | number)

Accesibilidad

• role="radiogroup" + opciones role="radio" + aria-checked
• Roving tabindex: las teclas de dirección se mueven (omitiendo los deshabilitados y haciendo ciclo entre el primero y el último); solo la posición con el foco es alcanzable con Tab
• El color de fondo de la selección se transiciona con variables CSS

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/segmented/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhSegmentedProps

export interface LhSegmentedProps {
  /** Valor actual (v-model controlado) */
  modelValue?: LhSegmentedValue
  /** Opciones (escritura abreviada en forma de cadena u objeto) */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** Ocupa todo el ancho del contenedor */
  block?: boolean
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

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

/** Tipo del valor de la opción */
export type LhSegmentedValue = string | number

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

/** Opción de entrada (escritura abreviada en forma de cadena u objeto) */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

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

/** Forma de la opción como objeto */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}