Segment

Kichik variantlar toʻplami oʻrtasida almashish uchun segmented control. Radio tugmalar yoki tablarga zamonaviy muqobil.

Basic

Oddiy stringlar yoki raqamlar massivini uzating. Komponent uni avtomatik boshqaradi.

Selected: 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

Koʻproq nazorat uchun obyektlardan foydalaning — label, value, icon va 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

Har bir variantga icon maydonini qoʻshing.

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

Sizes

Uch oʻlcham: sm, default va lg.

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

Block

Segmentni teng oʻlchamdagi variantlar bilan toʻliq kenglikka choʻzish uchun block dan foydalaning.

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

Disabled

Butun komponent yoki alohida variantlarni oʻchiring.

<!-- 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

Har bir variantning render qilinishini toʻliq boshqarish uchun default slotdan foydalaning. option va active ni oladi.

<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

Segmentning istalgan qismini root-class, item-class, active-class va indicator-class orqali bekor qiling. Stringlar, massivlar yoki obyektlarni qabul qiladi — Vue’ning :class kabi.

<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

Segmentlar yaxshi ishlaydigan umumiy namunalar:

View Toggle

Billing Interval

API

VxSegment Props

Prop	Type	Default	Description
v-model	string | number	—	Tanlangan qiymat
options	(string | number | SegmentOption)[]	[]	Variantlar massivi
size	'sm' | 'default' | 'lg'	'default'	Komponent oʻlchami
block	boolean	false	Teng variantlar bilan toʻliq kenglik
disabled	boolean	false	Butun komponentni oʻchirish
root-class	string | string[] | object	—	Asosiy konteyner uchun class binding
item-class	string | string[] | object	—	Har bir element uchun class binding
active-class	string | string[] | object	—	Faol element uchun class binding
indicator-class	string | string[] | object	—	Sirgʻanuvchi indikator uchun class binding

SegmentOption

Property	Type	Required	Description
label	string	Yes	Koʻrinadigan matn
value	string | number	Yes	Variant qiymati
icon	string	No	Ikonka matni (emoji yoki belgi)
disabled	boolean	No	Ushbu variantni oʻchirish

Events

Event	Payload	Description
update:modelValue	string | number	Tanlangan qiymat oʻzgardi
change	string | number	Tanlangan qiymat oʻzgardi

Slots

Slot	Props	Description
default	{ option: SegmentOption, active: boolean }	Maxsus variant kontenti