Breadcrumb

Sayt ierarxiyasidagi joriy sahifaning joylashuvini ko'rsatuvchi navigatsiya komponenti. Yig'ish, dropdown, ikonkalar, o'lchamlar, loading holati, qisqartirish, maxsus ajratuvchilar, slot lar va to'liq class moslashuvini qo'llab-quvvatlaydi.

Basic

1. Home
2. /Products
3. /Electronics
4. /Headphones

<script setup>
import { VxBreadcrumb } from 'veloxui'

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Headphones' },
]
</script>

<template>
  <VxBreadcrumb :items="items" />
</template>

Sizes

Uchta o'lcham: small, default va large.

small

1. Home
2. Products
3. Electronics
4. Headphones

default

1. Home
2. Products
3. Electronics
4. Headphones

large

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" size="small" />
<VxBreadcrumb :items="items" size="default" />
<VxBreadcrumb :items="items" size="large" />

Separators

O'rnatilgan ajratuvchilardan tanlang yoki maxsus satrni uzating.

slash

1. Home
2. /Products
3. /Electronics
4. /Headphones

arrow

1. Home
2. Products
3. Electronics
4. Headphones

dot

1. Home
2. ·Products
3. ·Electronics
4. ·Headphones

dash

1. Home
2. –Products
3. –Electronics
4. –Headphones

<VxBreadcrumb :items="items" separator="slash" />
<VxBreadcrumb :items="items" separator="arrow" />
<VxBreadcrumb :items="items" separator="dot" />
<VxBreadcrumb :items="items" separator="dash" />

Custom Separator

Ajratuvchi sifatida istalgan satrni uzating yoki #separator slot idan foydalaning.

1. Home
2. |Products
3. |Electronics
4. |Headphones

1. Home
2. →Products
3. →Electronics
4. →Headphones

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" separator="|" />
<VxBreadcrumb :items="items" separator="→" />

<VxBreadcrumb :items="items">
  <template #separator>
    <MyIcon />
  </template>
</VxBreadcrumb>

Icons

O'rnatilgan ikonkalarni ko'rsatish uchun elementlarda icon ni o'rnating: home, folder, file, settings. Yoki maxsus ikonkalar uchun #icon slot idan foydalaning.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="[
  { label: 'Home', href: '/', icon: 'home' },
  { label: 'Documents', href: '/docs', icon: 'folder' },
  { label: 'Report.pdf', icon: 'file' },
]" separator="arrow" />

Collapsed (Expand)

Uzun breadcrumb larni yig'ish uchun max-items dan foydalaning. Kengaytirish uchun ellipsis ni bosing.

1. Home
3. Navigation
4. Breadcrumb

<VxBreadcrumb :items="items" :max-items="3" />

Collapsed (Dropdown)

Yashirilgan elementlarni dropdown popover da ko'rsatish uchun collapse-mode="dropdown" ni o'rnating.

1. Home
3. Components
4. Breadcrumb

<VxBreadcrumb
  :items="items"
  :max-items="3"
  collapse-mode="dropdown"
/>

Truncation

Uzun yorliqlarni ellipsis bilan qisqartirish uchun max-width dan foydalaning. To'liq matnni ko'rish uchun hover qiling.

1. Home
2. This is a very long category name
3. Another extremely long breadcrumb item name
4. Final destination page with a long title

<VxBreadcrumb :items="items" :max-width="120" />

Loading

Ma'lumot yuklanayotganda skelet placeholder ni ko'rsatadi.

<VxBreadcrumb :items="items" loading />

Disabled Items

Alohida elementlar o'chirib qo'yilishi mumkin.

1. Home
2. Archived
3. Old Page

<VxBreadcrumb :items="[
  { label: 'Home', href: '/' },
  { label: 'Archived', href: '/archived', disabled: true },
  { label: 'Old Page' },
]" />

Custom Item Slot

Maxsus renderlash uchun #item slot idan foydalaning. item, index va active ni oladi.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="items">
  <template #item="{ item, active }">
    <MyIcon :name="item.icon" />
    {{ item.label }}
  </template>
</VxBreadcrumb>

Exposed Methods

expand(), collapse() va isCollapsed ga template ref orqali kirishingiz mumkin.

<script setup>
import { ref } from 'vue'
const breadcrumbRef = ref()

function toggleCollapse() {
  if (breadcrumbRef.value.isCollapsed) {
    breadcrumbRef.value.expand()
  } else {
    breadcrumbRef.value.collapse()
  }
}
</script>

<template>
  <VxBreadcrumb ref="breadcrumbRef" :items="items" :max-items="3" />
  <button @click="toggleCollapse">Almashtirish</button>
</template>

Custom Classes

root-class, item-class, active-class va separator-class bilan stilni qayta aniqlang.

<VxBreadcrumb
  :items="items"
  root-class="my-breadcrumb"
  item-class="my-item"
  active-class="my-active"
  separator-class="my-sep"
/>

API

VxBreadcrumb Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	[]	Breadcrumb elementlari
separator	'slash' | 'arrow' | 'dot' | 'dash' | string	'slash'	Elementlar orasidagi ajratuvchi
size	'small' | 'default' | 'large'	'default'	O'lcham varianti
max-items	number	0	Ko'rinadigan elementlar maksimal soni (0 = hammasini ko'rsatish). O'rtadagi elementlarni yig'adi.
collapse-mode	'expand' | 'dropdown'	'expand'	Yig'ilgan elementlar qanday ochilishi
max-width	number	0	Har bir yorliq uchun maksimal kenglik (px da). Ellipsis bilan qisqartiradi.
loading	boolean	false	Skelet loading holatini ko'rsatish
root-class	string | string[] | object	—	Ildiz <nav> dagi class
item-class	string | string[] | object	—	Har bir havoladagi class
active-class	string | string[] | object	—	Joriy (oxirgi) elementdagi class
separator-class	string | string[] | object	—	Ajratuvchi elementlardagi class

BreadcrumbItem

Property	Type	Required	Description
label	string	Yes	Ko'rsatiladigan matn
href	string	No	Havola URL i
to	string | object	No	Vue Router manzili (<router-link> sifatida renderlanadi)
icon	string	No	O'rnatilgan ikonka: home, folder, file, settings
disabled	boolean	No	Ushbu elementni o'chirib qo'yish

Events

Event	Payload	Description
click	(item, index, event)	Element bosildi
expand	—	Yig'ilgan elementlar kengaytirildi
collapse	—	Elementlar qayta yig'ildi

Slots

Slot	Props	Description
item	{ item, index, active }	Maxsus element kontenti
icon	{ item }	Har bir element uchun maxsus ikonka
separator	—	Maxsus ajratuvchi kontenti
ellipsis	{ expand, toggleDropdown, collapsedItems }	Maxsus ellipsis tugmasi

Exposed

Name	Type	Description
expand()	() => void	Yig'ilgan elementlarni kengaytirish
collapse()	() => void	Elementlarni qayta yig'ish
isCollapsed	boolean	Joriy yig'ilish holati