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

Переключение взаимоисключающих вариантов; типичный сценарий — переключатель режима просмотра.

Базовое использование

Базовое использование

<script setup>
import { ref } from 'vue'
const view = ref('Список')
</script>

<template>
  <LhSegmented v-model="view" :options="['Список', 'Карточки', 'Таблица']" />
</template>

<script>
export default {
  data() {
    return { view: 'Список' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['Список', 'Карточки', 'Таблица']" />
</template>

Отключённые элементы и block

Отключённый элемент

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

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'День', value: 'day' }, { label: 'Неделя', value: 'week' }, { label: 'Месяц', value: 'month', disabled: true }]"
  />
</template>

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

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'День', value: 'day' }, { label: 'Неделя', value: 'week' }, { label: 'Месяц', value: 'month', disabled: true }]"
  />
</template>

disabled на уровне компонента отключает весь переключатель.

Отключение целиком

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

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['А', 'Б', 'В']"
  />
</template>

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

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['А', 'Б', 'В']"
  />
</template>

API

LhSegmented Props

Свойство	Описание	Тип	По умолчанию
modelValue	Текущее значение (контролируемый v-model)	string | number	—
options	Варианты (строковая короткая запись или объекты)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	Отключение целиком	boolean	false
block	Заполнять контейнер	boolean	false
sx	Свойства быстрой разметки sx	LhSxProps	—

Events

Событие	Описание	Параметры обратного вызова
update:modelValue	Срабатывает при изменении выбранного варианта, используется с v-model	(value: string | number)
change	Срабатывает при изменении выбранного варианта (и при клике, и стрелками)	(value: string | number)

Доступность

• role="radiogroup" + варианты role="radio" + aria-checked
• roving tabindex: перемещение стрелками (отключённые пропускаются, зацикливание между первым и последним), Tab доступен только позиции в фокусе
• Цвет выделения переводится через CSS-переменную

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/segmented/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhSegmentedProps

export interface LhSegmentedProps {
  /** Текущее значение (контролируемый v-model) */
  modelValue?: LhSegmentedValue
  /** Варианты (строковая короткая запись или объекты) */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** Заполнять контейнер */
  block?: boolean
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
}

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

/** Тип значения варианта */
export type LhSegmentedValue = string | number

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

/** Исходный вариант (строковая короткая запись или объект) */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

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

/** Объектная форма варианта */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}