Tabs

Kontent bo‘limlari o‘rtasida almashish uchun tab navigatsiya komponenti. Line, card va pill variantlarini, belgilar, yopiladigan tablarni, kontent panellarini va to‘rtta pozitsiyani (tepa, past, chap, o‘ng) qo‘llab-quvvatlaydi.

Basic

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

const active = ref('home')

const items = [
  { key: 'home', label: 'Home' },
  { key: 'profile', label: 'Profile' },
  { key: 'settings', label: 'Settings' },
]
</script>

<template>
  <VxTabs v-model="active" :items="items" />
</template>

With Icons

<VxTabs v-model="active" :items="[
  { key: 'overview', label: 'Overview', icon: 'home' },
  { key: 'analytics', label: 'Analytics', icon: 'chart' },
  { key: 'settings', label: 'Settings', icon: 'settings' },
  { key: 'users', label: 'Users', icon: 'user' },
]" />

Disabled Tab

<VxTabs v-model="active" :items="[
  { key: 'general', label: 'General' },
  { key: 'security', label: 'Security' },
  { key: 'billing', label: 'Billing', disabled: true },
  { key: 'notifications', label: 'Notifications' },
]" />

Card Variant

<VxTabs v-model="active" :items="items" variant="card" />

Pill Variant

<VxTabs v-model="active" :items="items" variant="pill" />

Segment Variant

Pastda chegarali card korpusiga ega segmentlangan pill-uslubidagi tablar.

Home

Xush kelibsiz! Bu yerda so‘nggi faoliyatingiz va tezkor amallar ko‘rsatilgan.

Profile

Settings

Tungi rejim

Bildirishnomalar

<script setup>
import { ref } from 'vue'
import { VxTabs, VxInput, VxButton, VxSwitch } from 'veloxui'

const active = ref('home')

const items = [
  { key: 'home', label: 'Home' },
  { key: 'profile', label: 'Profile' },
  { key: 'settings', label: 'Settings' },
]
</script>

<template>
  <VxTabs v-model="active" :items="items" variant="segment">
    <template #panel-home>
      <p>Welcome back! Here is an overview of your activity.</p>
    </template>
    <template #panel-profile>
      <VxInput placeholder="Display name" />
      <VxButton size="sm">Save</VxButton>
    </template>
    <template #panel-settings>
      <div>Dark mode <VxSwitch /></div>
      <div>Notifications <VxSwitch /></div>
    </template>
  </VxTabs>
</template>

Folder Variant

Klassik papka-tab uslubi — faol tab pastdagi card korpusiga silliq ulanadi.

Home

Xush kelibsiz! Bu yerda so‘nggi faoliyatingiz va tezkor amallar ko‘rsatilgan.

Profile

Settings

Tungi rejim

Bildirishnomalar

<VxTabs v-model="active" :items="items" variant="folder">
  <template #panel-home>
    <p>Home content here.</p>
  </template>
  <template #panel-profile>
    <p>Profile content here.</p>
  </template>
</VxTabs>

Closable Tabs

Tab elementlariga closable: true ni o‘rnating. Tablarni olib tashlash uchun close hodisasini tinglang.

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

const active = ref('tab1')
const items = ref([
  { key: 'tab1', label: 'Welcome', closable: false },
  { key: 'tab2', label: 'Document.vue', closable: true },
  { key: 'tab3', label: 'Settings.ts', closable: true },
])

function closeTab(key) {
  items.value = items.value.filter(t => t.key !== key)
  if (active.value === key) active.value = items.value[0]?.key
}
</script>

<template>
  <VxTabs v-model="active" :items="items" variant="card" @close="closeTab" />
</template>

Sizes

Uchta o‘lcham: sm, md (sukut bo‘yicha) va lg.

<VxTabs :items="items" v-model="active" size="sm" />
<VxTabs :items="items" v-model="active" size="md" />
<VxTabs :items="items" v-model="active" size="lg" />

Block Mode

Tablar butun kenglikka teng ravishda cho‘ziladi.

<VxTabs v-model="active" :items="items" block />

Content Panels

Tablar bilan almashinadigan kontentni render qilish uchun panel-{key} slotlardan foydalaning.

Profil sozlamalari

Parolni o‘zgartirish

Jamoa a’zolari

Bu yerda jamoa a’zolaringizni taklif qiling va boshqaring.

<VxTabs v-model="active" :items="items">
  <template #panel-profile>
    <VxInput placeholder="Display name" />
    <VxButton size="sm">Save</VxButton>
  </template>
  <template #panel-password>
    <VxInput placeholder="Current password" type="password" />
    <VxInput placeholder="New password" type="password" />
    <VxButton size="sm">Update</VxButton>
  </template>
  <template #panel-team>
    <p>Invite and manage your team members here.</p>
  </template>
</VxTabs>

Vertical (Left / Right)

Vertikal tablar uchun position="left" yoki position="right" dan foydalaning.

Umumiy sozlamalar

Umumiy parametrlar va konfiguratsiyani boshqaring.

Xavfsizlik

Ikki bosqichli autentifikatsiya, sessiyalar va kirish tarixi.

Hisob-kitob

Obunangizni, to‘lov usullarini va hisob-fakturalarni boshqaring.

Bildirishnomalar

Email, push va ilova ichidagi bildirishnoma parametrlarini sozlang.

<VxTabs v-model="active" :items="items" position="left">
  <template #panel-settings>
    <p>General settings content...</p>
  </template>
  <template #panel-security>
    <p>Security content...</p>
  </template>
</VxTabs>

Bottom Position

Tablar pastda joylashgan Home kontenti.

Bu yerda Profile kontenti.

Bu yerda Settings kontenti.

<VxTabs v-model="active" :items="items" position="bottom">
  <template #panel-home>
    <p>Home content with tabs at the bottom.</p>
  </template>
</VxTabs>

API

VxTabs Props

Prop	Type	Default	Description
v-model	string	—	Faol tab kaliti
items	TabItem[]	[]	Tab elementlari
variant	'line' | 'card' | 'pill' | 'segment' | 'folder'	'line'	Vizual uslub
size	'sm' | 'md' | 'lg'	'md'	Tab o‘lchami
position	'top' | 'bottom' | 'left' | 'right'	'top'	Tab paneli pozitsiyasi
block	boolean	false	Tablarni teng kenglikka cho‘zish
root-class	string | string[] | object	—	Ildizdagi class

TabItem

Property	Type	Required	Description
key	string	Yes	Noyob identifikator
label	string	Yes	Tab yorlig‘i matni
icon	string | Component	No	Tab belgisi
disabled	boolean	No	Bu tabni o‘chirish
closable	boolean	No	Yopish tugmasini ko‘rsatish

Slots

Slot	Props	Description
tab	{ item, active }	Barcha tablar uchun moslashtirilgan tab tugma kontenti
tab-{key}	{ item, active }	Muayyan tab uchun moslashtirilgan tab tugma kontenti
panel	{ item, active }	Barcha tablar uchun standart panel kontenti
panel-{key}	{ item, active }	Muayyan tab uchun panel kontenti
extra	—	Navigatsiya panelida tablardan keyingi qo‘shimcha kontent

Events

Event	Payload	Description
update:modelValue	(key: string)	Faol tab o‘zgardi
change	(key: string)	Tab tanlandi
close	(key: string)	Tab yopish tugmasi bosildi