Bileşenler

ContextMenu

Bir alana sağ tıklayınca ya da basılı tutunca işaretçinin yanında açılan işlem menüsü.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { ContextMenu } from '@bigbang/ui';
Kaynak: ContextMenu.tsx
Storybook: ContextMenu · Playground

ContextMenu, @bigbang/ui paketindedir. Parçaları DropdownMenu ile aynıdır.

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

<ContextMenu trigger={<Card>…</Card>}>
  <ContextMenu.Item icon="pencil" onSelect={edit}>Düzenle</ContextMenu.Item>
  <ContextMenu.Separator />
  <ContextMenu.Item icon="trash" tone="danger" onSelect={remove}>Sil</ContextMenu.Item>
</ContextMenu>;

Özellikler

triggerZorunlu

Açıklama: Sağ tıklayınca ya da basılı tutunca menüyü açan alan, örneğin bir tablo satırı ya da kart.
Tür: ReactElement

childrenZorunlu

Açıklama: ContextMenu.* parçalarıyla kurulan öğeler, gruplar, ayırıcılar ve alt menüler; DropdownMenu ile aynı parçalar.
Tür: ReactNode

open

Açıklama: Kontrollü açık durum. onOpenChange ile birlikte verin.
Tür: boolean

defaultOpen

Açıklama: Kontrolsüz kullanımda 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: Alanın menüyü açmasını engeller.
Tür: boolean
Varsayılan: false

Parçalar

ContextMenu.Item, LinkItem, CheckboxItem, RadioGroup, RadioItem, Group, Separator, Submenu: DropdownMenu parçalarının aynısı; propları DropdownMenu sayfasındadır.

Veri öznitelikleri

data-component="context-menu": menüde; data-component="context-menu-trigger": alanda.