Dropdown

Trigger rejimlari, o'lchamlar, split tugmalar, submenyular, ikonkalar, qidiruv, checkboxlar, nishonlar, guruhlar, yuklanish va boshqalarga ega oddiy elementlarga asoslangan dropdown.

Basic

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

const items = [
  { label: 'Edit', icon: 'edit', value: 'edit' },
  { label: 'Duplicate', icon: 'copy', value: 'duplicate' },
  { label: 'Share', icon: 'share', value: 'share' },
  { label: 'Delete', icon: 'trash', value: 'delete', divided: true, destructive: true },
]
</script>

<template>
  <VxDropdown :items="items" @command="onCommand">
    <VxButton>Actions</VxButton>
  </VxDropdown>
</template>

Item Actions

Har bir elementga to'g'ridan-to'g'ri action callback qo'shing — @command ni alohida boshqarish shart emas.

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

const message = ref('')

const items = [
  {
    label: 'Copy',
    icon: 'copy',
    action: () => { message.value = 'Copied to clipboard!' },
  },
  {
    label: 'Download',
    icon: 'download',
    action: (item) => {
      console.log('Downloading:', item.label)
      message.value = 'Download started...'
    },
  },
  {
    label: 'Share Link',
    icon: 'link',
    action: () => { message.value = 'Link shared!' },
  },
  {
    label: 'Delete',
    icon: 'trash',
    destructive: true,
    divided: true,
    confirm: 'Are you sure?',
    action: () => { message.value = 'Item deleted!' },
  },
]
</script>

<template>
  <VxDropdown :items="items">
    <VxButton>Actions</VxButton>
  </VxDropdown>
  <span>{{ message }}</span>
</template>

Trigger Modes

click (sukut), hover va contextmenu triggerlarini qo'llab-quvvatlaydi.

<VxDropdown :items="items" trigger="click">...</VxDropdown>
<VxDropdown :items="items" trigger="hover">...</VxDropdown>
<VxDropdown :items="items" trigger="contextmenu">...</VxDropdown>

Keyboard Shortcuts

Elementlar yonida shortcut maslahatlarini ko'rsating.

<VxDropdown :items="[
  { label: 'Profile', icon: 'user', shortcut: '⇧⌘P' },
  { label: 'Settings', icon: 'settings', shortcut: '⌘,' },
]">
  <VxButton>My Account</VxButton>
</VxDropdown>

Sizes

<VxDropdown :items="items" size="small">...</VxDropdown>
<VxDropdown :items="items" size="default">...</VxDropdown>
<VxDropdown :items="items" size="large">...</VxDropdown>

Item Descriptions

Elementlarga ikkilamchi tavsif qatorini qo'shing.

<VxDropdown :items="[
  { label: 'Public', icon: 'link', description: 'Anyone with the link can view' },
  { label: 'Team', icon: 'user', description: 'Only team members can access' },
  { label: 'Private', icon: 'folder', description: 'Only you can see this' },
]" width="260px">
  <VxButton>Visibility</VxButton>
</VxDropdown>

Checkbox Items

type: 'checkbox' bo'lgan elementlar bosilganda o'zgaruvchi belgilov ko'rsatgichini ko'rsatadi.

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

const items = reactive([
  { label: 'Show Toolbar', type: 'checkbox', checked: true },
  { label: 'Show Sidebar', type: 'checkbox', checked: false },
  { label: 'Word Wrap', type: 'checkbox', checked: false },
])
</script>

<template>
  <VxDropdown :items="items" :hide-on-click="false" />
</template>

Radio Items

type: 'radio' va bir xil group ga ega elementlar radio guruh sifatida ishlaydi.

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

const items = reactive([
  { label: 'Light', type: 'radio', group: 'theme', checked: true },
  { label: 'Dark', type: 'radio', group: 'theme', checked: false },
  { label: 'System', type: 'radio', group: 'theme', checked: false },
])
</script>

<template>
  <VxDropdown :items="items" :hide-on-click="false" />
</template>

Badges

Elementlar yonida har xil turdagi nishonlarni ko'rsating: default, primary, success, warning, danger.

<VxDropdown :items="[
  { label: 'Inbox', icon: 'mail', badge: 12, badgeType: 'primary' },
  { label: 'Updates', icon: 'star', badge: 'New', badgeType: 'success' },
  { label: 'Alerts', icon: 'heart', badge: 3, badgeType: 'danger' },
]">
  <VxButton>Notifications</VxButton>
</VxDropdown>

Grouped Items

Elementlarni group xususiyati orqali guruhlang.

<VxDropdown :items="[
  { label: 'Profile', icon: 'user', value: 'profile', group: 'Account' },
  { label: 'Settings', icon: 'settings', value: 'settings', group: 'Account' },
  { label: 'New File', icon: 'file', value: 'new', group: 'Actions' },
  { label: 'Upload', icon: 'upload', value: 'upload', group: 'Actions' },
  { label: 'Download', icon: 'download', value: 'download', group: 'Actions' },
  { label: 'Log out', icon: 'logout', value: 'logout', divided: true, destructive: true },
]" width="200px">
  <VxButton>Menu</VxButton>
</VxDropdown>

Search / Filter

Elementlarni real vaqtda filtrlaydigan qidiruv maydonini qo'shish uchun filterable ni belgilang.

<VxDropdown :items="items" filterable>
  <VxButton>Fruits</VxButton>
</VxDropdown>

Split Button

<VxDropdown :items="items" split-button @click="onMainClick">
  Actions
</VxDropdown>

Submenu

children ga ega elementlar sichqoncha ko'rsatilganda ichki submenyuni ko'rsatadi.

<VxDropdown :items="[
  { label: 'New File', icon: 'file' },
  { label: 'Share', icon: 'share', children: [
    { label: 'Copy Link' },
    { label: 'Email' },
  ] },
]">
  <VxButton>File Actions</VxButton>
</VxDropdown>

Destructive Items

destructive: true ga ega elementlar qizil rangda stillangan bo'ladi.

<VxDropdown :items="[
  { label: 'Edit', icon: 'edit' },
  { label: 'Delete', icon: 'trash', destructive: true, divided: true },
]" />

Custom Colors

Maxsus ranglar uchun alohida elementlarga color ni belgilang.

<VxDropdown :items="[
  { label: 'Success', color: '#22c55e' },
  { label: 'Warning', color: '#f59e0b' },
  { label: 'Danger', color: '#ef4444' },
]" />

Popconfirm

confirm ga ega elementlar bajarilishidan oldin ichki tasdiqlashni ko'rsatadi.

<VxDropdown :items="[
  { label: 'Save', icon: 'check' },
  { label: 'Delete All', icon: 'trash', destructive: true, confirm: 'Delete everything?' },
]" />

Disabled Items with Tooltip

O'chirilgan elementlar sichqoncha ko'rsatilganda sabab tooltipni ko'rsatishi mumkin.

<VxDropdown :items="[
  { label: 'Edit', value: 'edit' },
  { label: 'Archive', disabled: true, disabledReason: 'You need admin permissions' },
]" />

Loading

Elementlar yuklanayotganda skelet placeholderlarini ko'rsating.

<VxDropdown :items="items" loading>
  <VxButton>Loading...</VxButton>
</VxDropdown>

Max Height

<VxDropdown :items="items" :max-height="200" />

Header & Footer Slots

<VxDropdown :items="items">
  <template #header><strong>Quick Actions</strong></template>
  <template #footer>Press ⌘K for more</template>
</VxDropdown>

Controlled (v-model)

Ochiq holatini dasturiy boshqarish uchun v-model dan foydalaning.

<script setup>
const open = ref(false)
</script>

<template>
  <VxButton @click="open = !open">Toggle</VxButton>
  <VxDropdown v-model="open" :items="items">
    <VxButton>Controlled</VxButton>
  </VxDropdown>
</template>

Placement

<VxDropdown :items="items" placement="bottom-start">...</VxDropdown>
<VxDropdown :items="items" placement="bottom">...</VxDropdown>
<VxDropdown :items="items" placement="bottom-end">...</VxDropdown>

Disabled

API

VxDropdown Props

Prop	Type	Default	Description
items	DropdownItem[]	[]	Menyu elementlari
v-model	boolean	—	Boshqariladigan ochilish holati
trigger	'click' | 'hover' | 'contextmenu'	'click'	Qanday ochilishi
placement	'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'	'bottom-start'	Panel joylashuvi
size	'small' | 'default' | 'large'	'default'	O'lcham varianti
disabled	boolean	false	Dropdown ni o'chirish
split-button	boolean	false	Split tugma rejimi
hide-on-click	boolean	true	Tanlovdan keyin yopish
max-height	number	0	Panelning maksimal balandligi (aylanuvchi)
show-arrow	boolean	false	Ko'rsatkich strelkani ko'rsatish
width	string	''	Maxsus panel kengligi
filterable	boolean	false	Qidiruv maydonini ko'rsatish
filter-placeholder	string	'Search...'	Qidiruv placeholderi
loading	boolean	false	Yuklanish skeletini ko'rsatish
teleport	string | boolean	false	Panelni maqsadga teleportlash
root-class	string | string[] | object	—	Ildizdagi class

DropdownItem

Property	Type	Default	Description
label	string	—	Ko'rsatiladigan matn
value	string | number	label	Command da yuboriladigan qiymat
icon	string	—	O'rnatilgan ikonka nomi
description	string	—	Yorliq ostidagi ikkilamchi matn
shortcut	string	—	Klaviatura shortcut maslahati
badge	string | number	—	Nishon tarkibi
badgeType	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	Nishon rangi
type	'default' | 'checkbox' | 'radio'	'default'	Element turi
checked	boolean	—	Checkbox/radio holati
group	string	—	Guruh yorlig'i (bir xil group li elementlar guruhlanadi)
disabled	boolean	—	Elementni o'chirish
disabledReason	string	—	O'chirilgan elementga sichqoncha qo'yilganda ko'rsatiladigan tooltip
destructive	boolean	—	Qizil destruktiv stil
color	string	—	Maxsus rang bilan almashtirish
divided	boolean	—	Yuqorida ajratuvchini ko'rsatish
confirm	string	—	Bajarilishidan oldingi tasdiqlash xabari
action	(item) => void	—	Element bosilganda ishga tushadigan callback
children	DropdownItem[]	—	Ichki submenyu

Events

Event	Payload	Description
command	(value, item)	Element tanlandi
click	(event)	Asosiy tugma bosildi (split rejim)
visible-change	(visible)	Dropdown ochildi/yopildi
update:modelValue	(boolean)	v-model sinxronizatsiyasi
check-change	(item, checked)	Checkbox/radio holati o'zgardi

Slots

Slot	Props	Description
default	—	Trigger tarkibi
dropdown	—	To'liq maxsus dropdown tarkibi
item	{ item, index }	Element uchun maxsus render
icon	{ item }	Har bir element uchun maxsus ikonka
header	—	Elementlar ustidagi tarkib
footer	—	Elementlar ostidagi tarkib
empty	—	Filtrga mos element topilmaganda ko'rsatiladi

Exposed

Name	Type	Description
show()	() => void	Ochish
hide()	() => void	Yopish
toggle()	() => void	Ochish/yopishni almashtirish