ContextMenu

Sağ tıkla imlecin olduğu yerde, ya da focus'lu bir elemanda ContextMenu tuşu / Shift+F10 ile açılan aksiyon menüsü. DropdownMenu'nun öğelerini, klavye modelini ve stillerini paylaşır.

BetaKaynak kod

Buraya sağ tıkla ya da dosyaya focus verip Shift+F10'a bas

Son işlem: henüz yok

import { Button, ContextMenu } from "@meridui/react";

export function Example() {
  const [pinned, setPinned] = useState(false);
  return (
    <ContextMenu.Root label="Dosya işlemleri">
      <ContextMenu.Trigger className="file-area">
        <Button variant="ghost">ceyrek-raporu.pdf</Button>
        <span>Buraya sağ tıkla ya da dosyaya focus verip Shift+F10'a bas</span>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item trailing="↵" onSelect={() => open()}>Aç</ContextMenu.Item>
        <ContextMenu.Item onSelect={() => rename()}>Yeniden adlandır</ContextMenu.Item>
        <ContextMenu.Item disabled>Taşı…</ContextMenu.Item>
        <ContextMenu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Sabitlendi</ContextMenu.CheckboxItem>
        <ContextMenu.Separator />
        <ContextMenu.Item onSelect={() => remove()}>Sil</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
}

Import

import { ContextMenu } from "@meridui/react";

Anatomi

<ContextMenu.Root>
  <ContextMenu.Trigger />
  <ContextMenu.Content>
    <ContextMenu.Label />
    <ContextMenu.Group>
      <ContextMenu.Item />
      <ContextMenu.CheckboxItem />
    </ContextMenu.Group>
    <ContextMenu.Separator />
  </ContextMenu.Content>
</ContextMenu.Root>

Root açık/kapalı state'ini ve menünün erişilebilir adını (label) tutar.
Trigger contextmenu event'ini dinleyen alandır. Bir <div>'dir (ya da asChild ile senin elemanın) ve kendisi focus almaz: klavye kullanıcılarının menüyü ContextMenu tuşu ya da Shift+F10 ile açabilmesi için içine focus alabilen içerik koy.
Content ve öğeler DropdownMenu'dekilerin aynısıdır; orada bildiğin her şey burada da geçerli.

Örnekler

Konum

Menü imlecin olduğu yerde açılır. Klavyeden açıldığında imleç konumu olmadığı için focus'lu elemanın altında açılır. Viewport içinde kalmak için yön değiştirir ve kayar.

Tarayıcı menüsünü korumak

Tarayıcının kendi bağlam menüsünün görünmesi için Trigger'a disabled ver; örneğin bir metin alanının içinde.

API referansı

Root

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`label`	`string`	`"Context menu"`	Menünün erişilebilir adı.
`children`	`ReactNode`	–	Trigger ve Content.

Trigger

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	Sağ tık alanı olarak tek child elemanı render'lar.
`disabled`	`boolean`	`false`	Onun yerine tarayıcının kendi bağlam menüsü görünür.
`ref`	`Ref<HTMLDivElement>`	–	Alan elemanına iletilen ref.

Content, Item, CheckboxItem, Group, Label, Separator

Prop'ları DropdownMenu'deki karşılıklarıyla aynı. Content, imlece göre varsayılan olarak placement="bottom-start" ve sideOffset={2} kullanır.

ContextMenu, DropdownMenu sayfasında listelenen menü sınıflarını (.mrd-menu, .mrd-menu__item, …) kullanır. Tetikleyici alanın sınıfı .mrd-context-menu__trigger'dır (asChild değilse); devre dışıyken data-disabled taşır.

Erişilebilirlik

WAI-ARIA Menu desenini izler. Menünün adı label'dan gelir; açılınca focus ilk öğeye geçer, Escape ile ya da bir seçim yapılınca önceki elemana döner.

Tuş	Ne yapar
`ShiftF10`	Tetikleyicinin içindeki focus'lu bir elemanda: menüyü açar.
`ContextMenu`	Shift+F10 ile aynı.
`ArrowDown`	Sonraki öğe; sona gelince başa döner.
`ArrowUp`	Önceki öğe; başa gelince sona döner.
`Home`	İlk öğe.
`End`	Son öğe.
`Enter`	Öğeyi çalıştırır.
`Space`	Öğeyi çalıştırır.
`A–Z`	Yazılan metinle başlayan bir sonraki öğeye gider (typeahead).
`Escape`	Kapatır ve focus'u geri verir.

Kullanım ilkeleri

Yap

Bağlam menüsünü başka yerden de (bir toolbar, bir satır menüsü) ulaşılabilen aksiyonlar için kısayol olarak kullan.

Kaçın

Aksiyonları yalnızca sağ tıkın arkasına saklamak. Dokunmatik kullanıcılar ve pek çok klavye kullanıcısı onları hiç bulamaz.

İlgili sayfalar

DropdownMenu: aynı menü, bir butondan açılır.
Toolbar: aynı aksiyonlar için görünür kontroller.