DropdownMenu

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { DropdownMenu } from '@bigbang/ui';

Kaynak

DropdownMenu.tsx

Storybook

DropdownMenu · Playground

DropdownMenu, @bigbang/ui paketindedir.

import { DropdownMenu, IconButton } from '@bigbang/ui';

<DropdownMenu align="end" trigger={<IconButton icon="ellipsis" label="Diğer işlemler" />}>
  <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']} onSelect={edit}>
    Düzenle
  </DropdownMenu.Item>
  <DropdownMenu.Separator />
  <DropdownMenu.Item icon="trash" tone="danger" onSelect={confirmDelete}>
    Sil
  </DropdownMenu.Item>
</DropdownMenu>;

Özellikler

triggerZorunlu

Açıklama

Menüyü açan buton, genellikle bir Button ya da "Diğer işlemler" gibi bir IconButton.

Tür

ReactElement

childrenZorunlu

Açıklama

DropdownMenu.* parçalarından öğeler, gruplar, ayırıcılar ve alt menüler.

Tür

ReactNode

side

Açıklama

Menünün tetikleyicinin hangi yanında açılacağı; yer yoksa ters yana geçer.

Tür

Side

Varsayılan

'bottom'

align

Açıklama

O yan boyunca hizalama.

Tür

'end' | 'start' | 'center'

Varsayılan

'start'

open

Açıklama

Kontrollü açık durum. onOpenChange ile birlikte verin.

Tür

boolean

defaultOpen

Açıklama

Menü kontrolsüz kullanıldığında ilk çizimdeki açık durum.

Tür

boolean

Varsayılan

false

onOpenChange

Açıklama

Yeni açık durumla çağrılır.

Tür

(open: boolean) => void

disabled

Açıklama

Tetikleyicinin menüyü açmasını engeller.

Tür

boolean

Varsayılan

false

material

Açıklama

'solid', cam bir Provider altında menüyü ve alt menülerini opak tutar.

Tür

'auto' | 'solid'

Varsayılan

'auto'

Parçalar

Parça	Özellikler	Not
DropdownMenu.Item	children, onSelect, icon, tone (neutral | danger), shortcut (KbdKey[]), description, disabled, disabledReason, closeOnSelect (varsayılan true)	shortcut yalnızca gösterilir; tuşları uygulama bağlar.
DropdownMenu.LinkItem	children, href, icon	<a> çizer.
DropdownMenu.CheckboxItem	children, checked, defaultChecked, onCheckedChange, disabled, shortcut	Menü açık kalır.
DropdownMenu.RadioGroup	label, value, defaultValue, onValueChange, children	Değer string.
DropdownMenu.RadioItem	children, value, disabled	Menü açık kalır.
DropdownMenu.Group	label, children	Etiket grubu adlandırır.
DropdownMenu.Separator	Yok
DropdownMenu.Submenu	label, icon, children, disabled	Üzerine gelince, basınca ve içe ok tuşuyla açılır.

Parça tipleri DropdownMenuItemProps gibi adlarla dışa açılır.

Veri öznitelikleri

• data-component="dropdown-menu": menü ve alt menü üzerinde; alt menüde data-part="submenu".
• data-tone="danger": tehlikeli öğe üzerinde. data-part="shortcut": kısayol.
• data-highlighted, data-disabled, data-checked, data-popup-open: Base UI’dan.