Dropdown Menu

Компонуемое dropdown-меню с навигацией с клавиатуры, группами, label, разделителями, горячими клавишами и destructive-элементами.

<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'	Горизонтальное выравнивание
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Сторона открытия
width	string	''	Ширина содержимого

VxDropdownMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Отключить элемент
destructive	boolean	false	Красный destructive-стиль
inset	boolean	false	Дополнительный отступ слева

Sub-components

Component	Description
VxDropdownMenuLabel	Заголовок секции (принимает prop inset)
VxDropdownMenuSeparator	Горизонтальный разделитель
VxDropdownMenuShortcut	Текст горячей клавиши, выровненный вправо
VxDropdownMenuGroup	Группирует элементы семантически

Events

Component	Event	Description
VxDropdownMenuItem	select	Срабатывает при клике по элементу