Segment

Сегментированный контрол для переключения между небольшим набором опций. Современная альтернатива радиокнопкам или вкладкам.

Basic

Передайте простой массив строк или чисел. Компонент обрабатывает это автоматически.

Выбрано: weekly

<script setup>
import { ref } from 'vue'
import { VxSegment } from 'veloxui'

const selected = ref('weekly')
</script>

<template>
  <VxSegment v-model="selected" :options="['daily', 'weekly', 'monthly']" />
</template>

Object Options

Используйте объекты для большего контроля — label, value, icon и disabled.

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

<template>
  <VxSegment v-model="selected" :options="[
    { label: 'Left', value: 'left' },
    { label: 'Center', value: 'center' },
    { label: 'Right', value: 'right' },
    { label: 'Justify', value: 'justify', disabled: true },
  ]" />
</template>

With Icons

Добавьте поле icon к каждой опции.

<VxSegment v-model="view" :options="[
  { label: 'Grid', value: 'grid', icon: '▦' },
  { label: 'List', value: 'list', icon: '☰' },
  { label: 'Board', value: 'board', icon: '▣' },
]" />

Sizes

Три размера: sm, default и lg.

<VxSegment :options="options" size="sm" />
<VxSegment :options="options" />
<VxSegment :options="options" size="lg" />

Block

Используйте block, чтобы растянуть сегмент на всю ширину с опциями одинакового размера.

<VxSegment v-model="tab" :options="['all', 'active', 'completed', 'archived']" block />

Disabled

Отключите компонент целиком или отдельные опции.

<!-- Entire component disabled -->
<VxSegment :options="['one', 'two', 'three']" disabled />

<!-- Individual option disabled -->
<VxSegment :options="[
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
  { label: 'System', value: 'system', disabled: true },
]" />

Custom Content

Используйте default-слот для полного контроля над отрисовкой каждой опции. Получает option и active.

<VxSegment v-model="plan" :options="[
  { label: 'Monthly', value: 'monthly' },
  { label: 'Yearly', value: 'yearly' },
]">
  <template #default="{ option, active }">
    <div style="text-align: center;">
      <div style="font-weight: 600;">{{ option.label }}</div>
      <div v-if="option.value === 'yearly'" :style="{ color: active ? 'var(--primary)' : 'var(--muted-foreground)' }">
        Save 20%
      </div>
    </div>
  </template>
</VxSegment>

Custom Classes

Переопределите любую часть сегмента с помощью root-class, item-class, active-class и indicator-class. Принимает строки, массивы или объекты — так же, как :class во Vue.

<template>
  <VxSegment
    v-model="tab"
    :options="['Overview', 'Details', 'Activity']"
    root-class="my-segment"
    item-class="my-item"
    active-class="my-active"
    indicator-class="my-indicator"
  />
</template>

<style>
.my-segment { background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 14px; }
.my-indicator { background: var(--primary); border-radius: 12px; }
.my-active { color: var(--primary-foreground); }
.my-item { border-radius: 12px; }
</style>

Use Cases

Типичные паттерны, где сегменты работают отлично:

Переключатель вида

Интервал оплаты

API

VxSegment Props

Prop	Type	Default	Description
v-model	string | number	—	Выбранное значение
options	(string | number | SegmentOption)[]	[]	Массив опций
size	'sm' | 'default' | 'lg'	'default'	Размер компонента
block	boolean	false	Во всю ширину с одинаковыми опциями
disabled	boolean	false	Отключить весь компонент
root-class	string | string[] | object	—	Привязка класса к корневому контейнеру
item-class	string | string[] | object	—	Привязка класса к каждому элементу
active-class	string | string[] | object	—	Привязка класса к активному элементу
indicator-class	string | string[] | object	—	Привязка класса к скользящему индикатору

SegmentOption

Property	Type	Required	Description
label	string	Да	Отображаемый текст
value	string | number	Да	Значение опции
icon	string	Нет	Текст иконки (эмодзи или символ)
disabled	boolean	Нет	Отключить эту опцию

Events

Event	Payload	Description
update:modelValue	string | number	Выбранное значение изменилось
change	string | number	Выбранное значение изменилось

Slots

Slot	Props	Description
default	{ option: SegmentOption, active: boolean }	Пользовательское содержимое опции