Dropdown Menu

Klaviatura navigatsiyasi, guruhlar, yorliqlar, ajratuvchilar, shortcutlar va destruktiv elementlarga ega bo'lgan moslashuvchan dropdown menyu.

<template>
  <VxDropdownMenu width="14rem">
    <template #trigger>
      <VxButton variant="outline">Open Menu</VxButton>
    </template>
    <VxDropdownMenuLabel>My Account</VxDropdownMenuLabel>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuGroup>
      <VxDropdownMenuItem>
        <UserIcon /> Profile
        <VxDropdownMenuShortcut>⇧⌘P</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
      <VxDropdownMenuItem>
        <CreditCardIcon /> Billing
        <VxDropdownMenuShortcut>⌘B</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
      <VxDropdownMenuItem>
        <SettingsIcon /> Settings
        <VxDropdownMenuShortcut>⌘S</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
    </VxDropdownMenuGroup>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem disabled>API</VxDropdownMenuItem>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem destructive>
      <LogOutIcon /> Log out
      <VxDropdownMenuShortcut>⇧⌘Q</VxDropdownMenuShortcut>
    </VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Alignment

<template>
  <VxDropdownMenu align="start">...</VxDropdownMenu>
  <VxDropdownMenu align="center">...</VxDropdownMenu>
  <VxDropdownMenu align="end">...</VxDropdownMenu>
</template>

With Icons

<template>
  <VxDropdownMenu>
    <template #trigger><VxButton variant="outline">Actions</VxButton></template>
    <VxDropdownMenuItem><PlusIcon /> New File</VxDropdownMenuItem>
    <VxDropdownMenuItem><DownloadIcon /> Download</VxDropdownMenuItem>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem destructive><TrashIcon /> Delete</VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Disabled Items

<template>
  <VxDropdownMenu>
    <template #trigger><VxButton>Options</VxButton></template>
    <VxDropdownMenuItem>Edit</VxDropdownMenuItem>
    <VxDropdownMenuItem disabled>Archive</VxDropdownMenuItem>
    <VxDropdownMenuItem destructive>Delete</VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Props

VxDropdownMenu

Prop	Type	Default	Description
align	'start' | 'center' | 'end'	'start'	Gorizontal tekislash
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Ochiladigan tomon
width	string	''	Tarkib kengligi

VxDropdownMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Elementni o'chirish
destructive	boolean	false	Qizil destruktiv stil
inset	boolean	false	Qo'shimcha chap padding

Sub-components

Component	Description
VxDropdownMenuLabel	Bo'lim yorlig'i (inset prop ni qabul qiladi)
VxDropdownMenuSeparator	Gorizontal ajratuvchi
VxDropdownMenuShortcut	O'ngga tekislangan shortcut matni
VxDropdownMenuGroup	Elementlarni semantik guruhlaydi

Events

Component	Event	Description
VxDropdownMenuItem	select	Element bosilganda ishga tushadi