Сегментированный переключатель

Сегментированный контрол. Варианты выбора задаются строками (короткая запись) или объектами { value, label, disabled }; block растягивает контрол на всю ширину контейнера.

Сегментированный переключатель

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['Список', 'Сетка', 'Альбом']" />
    <p class="demo-note">Короткая запись массивом строк: {{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">Объектная запись (с элементом disabled): {{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['Список', 'Сетка', 'Альбом']" disabled />
    <LhSegmented v-model="view" :options="['Список', 'Сетка', 'Альбом']" block />
    <p class="demo-note">block растягивает на всю ширину контейнера</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: 'Список',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: 'Тан' },
      { value: 'song', label: 'Сун' },
      { value: 'yuan', label: 'Юань' },
      { value: 'ming', label: 'Мин', disabled: true },
    ],
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Текущее значение (model: modelValue/input)	string \| number	—
options	Варианты выбора (строки или объекты; обязательный)	(string \| number \| { value, label, disabled? })[]	—
disabled	Отключение целиком	boolean	false
block	Растянуть на всю ширину контейнера	boolean	false
sx	Проп sx для быстрого макета	—	—

Events

input (v-model, параметр (val)), change (val).

Доступность

Корневой элемент role="radiogroup", каждый элемент role="radio" + aria-checked; переключение клавишами ←/→.