Sidebar

Yig‘iluvchi ichki menyular, qidiruv, drag & drop, o‘lcham o‘zgartirish, guruhlar, belgilar, yig‘ilgan rejim, mini rejim va boshqalarni qo‘llab-quvvatlaydigan vertikal yon panel navigatsiyasi.

Gorizontal navigatsiya uchun Menu ga qarang.

Basic

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

const active = ref('inbox')

const items = [
  { key: 'inbox', label: 'Inbox', icon: 'mail' },
  { key: 'starred', label: 'Starred', icon: 'star' },
  { key: 'drafts', label: 'Drafts', icon: 'file' },
  { key: 'trash', label: 'Trash', icon: 'trash' },
]
</script>

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

With Badges

<VxSidebar v-model="active" :items="[
  { key: 'inbox', label: 'Inbox', icon: 'mail', badge: 12, badgeType: 'primary' },
  { key: 'starred', label: 'Starred', icon: 'star', badge: 'New', badgeType: 'success' },
  { key: 'alerts', label: 'Alerts', icon: 'heart', badge: 3, badgeType: 'danger' },
]" />

Nested Submenus

Ichki elementlarni ochish/yopish uchun ota elementga bosing.

<VxSidebar v-model="active" :items="[
  {
    key: 'projects',
    label: 'Projects',
    icon: 'folder',
    children: [
      { key: 'design', label: 'Design System' },
      { key: 'api', label: 'API Platform' },
    ],
  },
]" />

Grouped

group xususiyati yordamida elementlarni bo‘lim sarlavhalari ostida guruhlang.

Communication

Workspace

System

<VxSidebar v-model="active" :items="[
  { key: 'inbox', label: 'Inbox', icon: 'mail', group: 'Communication' },
  { key: 'chat', label: 'Chat', icon: 'heart', group: 'Communication' },
  { key: 'analytics', label: 'Analytics', icon: 'search', group: 'Workspace' },
]" />

Notification Dots

Elementlar ustidagi kichik rangli indikatorlar. Sukut bo‘yicha qizil, dotColor orqali sozlanadi.

<VxSidebar v-model="active" :items="[
  { key: 'inbox', label: 'Inbox', icon: 'mail', dot: true },
  { key: 'chat', label: 'Chat', icon: 'heart', dot: true, dotColor: '#22c55e' },
]" />

Searchable

Elementlarni nomi bo‘yicha filtrlaydigan qidiruv maydonini qo‘shish uchun searchableni yoqing.

<VxSidebar v-model="active" :items="items" searchable />
<VxSidebar v-model="active" :items="items" searchable search-placeholder="Find..." />

Collapsed

Faqat belgilar va tultiplarni ko‘rsatish uchun collapsedni almashtirib turing. Ichki menyular popout ko‘rinishida chiqadi.

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

const active = ref('inbox')
const collapsed = ref(false)

const items = [
  { key: 'home', label: 'Home', icon: 'home' },
  { key: 'inbox', label: 'Inbox', icon: 'mail', badge: 5, badgeType: 'primary' },
  {
    key: 'projects',
    label: 'Projects',
    icon: 'folder',
    children: [
      { key: 'design', label: 'Design System' },
      { key: 'api', label: 'API Platform' },
      { key: 'mobile', label: 'Mobile App' },
    ],
  },
  {
    key: 'settings',
    label: 'Settings',
    icon: 'settings',
    children: [
      { key: 'profile', label: 'Profile', icon: 'user' },
      { key: 'security', label: 'Security', icon: 'link' },
      { key: 'billing', label: 'Billing' },
    ],
  },
  { key: 'logout', label: 'Log Out', icon: 'logout', divider: true },
]
</script>

<template>
  <VxButton @click="collapsed = !collapsed">
    {{ collapsed ? 'Expand' : 'Collapse' }}
  </VxButton>
  <VxSidebar v-model="active" :items="items" :collapsed="collapsed" />
</template>

Mini Mode

mini bilan yig‘ilganda, belgilar o‘rniga har bir nomning birinchi harfini ko‘rsatadi.

<VxSidebar v-model="active" :items="items" collapsed mini />

Resizable

Yon panel chetini tortib o‘lchamini o‘zgartirishga ruxsat berish uchun resizableni yoqing. Yon panelning o‘ng chetini torting.

← drag the edge to resize

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

const active = ref('inbox')
const collapsed = ref(false)

const items = [
  { key: 'inbox', label: 'Inbox', icon: 'mail' },
  { key: 'starred', label: 'Starred', icon: 'star' },
  { key: 'drafts', label: 'Drafts', icon: 'file' },
  { key: 'trash', label: 'Trash', icon: 'trash' },
]
</script>

<template>
  <VxSidebar
    v-model="active"
    v-model:collapsed="collapsed"
    :items="items"
    resizable
    :min-width="160"
    :max-width="360"
  />
</template>

Draggable

Yuqori darajadagi elementlarni drag and drop orqali tartibini o‘zgartirishga ruxsat berish uchun draggableni yoqing.

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

const active = ref('inbox')
const items = ref([
  { key: 'inbox', label: 'Inbox', icon: 'mail' },
  { key: 'starred', label: 'Starred', icon: 'star' },
  { key: 'drafts', label: 'Drafts', icon: 'file' },
  { key: 'trash', label: 'Trash', icon: 'trash' },
  { key: 'settings', label: 'Settings', icon: 'settings' },
])

function onReorder(newItems) {
  items.value = newItems
}
</script>

<template>
  <VxSidebar v-model="active" :items="items" draggable @reorder="onReorder" />
</template>

Router Integration

SPA navigatsiyasi uchun elementlardagi to xususiyatidan foydalaning.

<VxSidebar v-model="active" :items="[
  { key: 'home', label: 'Home', icon: 'home', to: '/' },
  { key: 'about', label: 'About', icon: 'user', to: '/about' },
]" />

Context Menu

Kontekst menyusini ko‘rish uchun "Inbox" yoki "Starred" ustiga o‘ng tugma bilan bosing.

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

const active = ref('inbox')

const items = [
  {
    key: 'inbox',
    label: 'Inbox',
    icon: 'mail',
    badge: 5,
    badgeType: 'primary',
    contextMenu: [
      { label: 'Mark all read', icon: 'check', action: (item) => {} },
      { label: 'Settings', icon: 'settings', action: (item) => {} },
      { label: 'Delete all', icon: 'trash', destructive: true, action: (item) => {} },
    ],
  },
  {
    key: 'starred',
    label: 'Starred',
    icon: 'star',
    contextMenu: [
      { label: 'Clear starred', icon: 'x', action: (item) => {} },
    ],
  },
  { key: 'drafts', label: 'Drafts', icon: 'file' },
  { key: 'settings', label: 'Settings', icon: 'settings' },
]
</script>

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

Loading

Ma’lumot yuklanayotgan paytda skeleton joy egallovchilarini ko‘rsating.

<VxSidebar loading :loading-count="6" />

Dark Theme

Main

Work

System

<VxSidebar v-model="active" :items="items" theme="dark" />

Accordion

Bir vaqtning o‘zida faqat bitta ichki menyuning ochiq turishiga ruxsat berish uchun accordionni o‘rnating. "Projects"ga, so‘ng "Settings"ga bosing — faqat bittasi ochiq qoladi.

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

const active = ref('home')

const items = [
  { key: 'home', label: 'Home', icon: 'home' },
  {
    key: 'projects',
    label: 'Projects',
    icon: 'folder',
    children: [
      { key: 'design', label: 'Design System' },
      { key: 'api', label: 'API Platform' },
    ],
  },
  {
    key: 'settings',
    label: 'Settings',
    icon: 'settings',
    children: [
      { key: 'profile', label: 'Profile', icon: 'user' },
      { key: 'security', label: 'Security', icon: 'link' },
    ],
  },
  { key: 'logout', label: 'Log Out', icon: 'logout' },
]
</script>

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

API

VxSidebar Props

Prop	Type	Default	Description
items	MenuItem[]	[]	Yon panel elementlari
v-model	string	''	Faol element kaliti
collapsed	boolean	false	Faqat belgilarga yig‘ish
theme	'light' | 'dark'	'light'	Rang mavzusi
accordion	boolean	false	Bir vaqtning o‘zida faqat bitta ichki menyu ochiq
indent	number	24	Ichki element chekinishi (px)
collapsed-width	number	48	Yig‘ilgandagi kengligi
width	number | string	240	Yon panel kengligi
rounded	boolean	true	Element burchaklari yumaloq
searchable	boolean	false	Qidiruv maydonini ko‘rsatish
search-placeholder	string	'Search...'	Qidiruv maydoni uchun placeholder
draggable	boolean	false	Drag & drop tartibini yoqish
mini	boolean	false	Yig‘ilganda birinchi harfni ko‘rsatish
resizable	boolean	false	O‘lcham tutqichini yoqish
min-width	number	160	O‘lcham o‘zgartirishdagi minimal kenglik
max-width	number	400	O‘lcham o‘zgartirishdagi maksimal kenglik
scroll-shadow	boolean	true	Scroll soyalarini ko‘rsatish
loading	boolean	false	Skeleton joy egallovchilarini ko‘rsatish
loading-count	number	6	Skeleton elementlar soni
root-class	string | string[] | object	—	Ildizdagi class

MenuItem

Property	Type	Required	Description
key	string	Yes	Noyob identifikator
label	string	Yes	Ko‘rinadigan matn
icon	string | Component	No	O‘rnatilgan belgi nomi yoki Vue komponenti
disabled	boolean	No	Bu elementni o‘chirish
badge	string | number	No	Belgi mazmuni
badgeType	'default' | 'primary' | 'success' | 'warning' | 'danger'	No	Belgi rangi
group	string	No	Guruh sarlavhasi nomi
divider	boolean	No	Yuqorida ajratuvchi chiziqni ko‘rsatish
action	(item) => void	No	Bosilganda ishga tushuvchi callback
children	MenuItem[]	No	Ichki menyu elementlari
to	string | object	No	Vue Router navigatsiya maqsadi
dot	boolean	No	Bildirishnoma nuqtasini ko‘rsatish
dotColor	string	No	Nuqta rangi (sukut bo‘yicha qizil)
pinned	boolean	No	Elementni tepada mahkamlash
contextMenu	ContextMenuItem[]	No	O‘ng tugma menyu elementlari

Slots

Slot	Props	Description
header	—	Navigatsiya ustidagi kontent
footer	—	Navigatsiya ostidagi kontent
item	{ item, active }	Moslashtirilgan element renderi

Events

Event	Payload	Description
update:modelValue	(key: string)	Faol element o‘zgardi
update:collapsed	(collapsed: boolean)	min-width dan pastga o‘zgartirilganda avtomatik yig‘iladi
select	(key, item)	Element tanlandi
open-change	(openKeys: string[])	Ichki menyu ochildi/yopildi
search	(query: string)	Qidiruv maydoni o‘zgardi
reorder	(items: MenuItem[])	Elementlar drag orqali qayta tartiblandi
resize	(width: number)	Yon panel o‘lchami o‘zgartirildi
context-menu	(item, event)	Elementga o‘ng tugma bosildi
pin	(item)	Element mahkamlandi/bo‘shatildi

Exposed

Name	Type	Description
openKeys()	() => string[]	Hozirda ochiq bo‘lgan ichki menyu kalitlarini olish
toggleOpen(key)	(key: string) => void	Ichki menyuni almashtirish