DropdownMenu

Ne zaman kullanılır

DropdownMenu, bir öğe ya da sayfa için birkaç eylemi tek bir butonun arkasında toplamak içindir: satır sonundaki “Diğer işlemler”, dışa aktarma seçenekleri, görünüm ayarları.

Ne zaman kullanılmaz

• Form değeri seçmek için: Select kullanın.
• İki ya da üç sık eylem için: Butonları doğrudan gösterin.
• Gezinme için: Uygulama kabuğunun gezinme bileşenini kullanın.
• Etkileşimli içerik için: Popover kullanın.

Anatomi

İşlemler

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">İşlemler</Button>}>
      <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']}>
        Düzenle
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" shortcut={['mod', 'D']}>
        Çoğalt
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="download" disabled disabledReason="Dışa aktarma bu öğe için kapalı.">
        Dışa aktar
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item icon="trash" tone="danger">
        Sil
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

1. Tetikleyici: Button ya da IconButton.
2. Menü: Yükseltilmiş zemin, ince halka, küçük gölge.
3. Öğe: İkon, etiket, isteğe bağlı ikinci satır ve kısayol.
4. Ayırıcı.
5. Tehlikeli öğe: Kırmızı metin ve ikon.

Davranış

• Tetikleyiciye basınca, Enter, Space ya da Aşağı ok ile açılır ve ilk öğe vurgulanır.
• Ok tuşları öğeler arasında gezer ve sonda başa döner; Home ve End uçlara gider; harf yazmak o harfle başlayan öğeye atlar.
• Öğe seçilince eylem çalışır, menü kapanır ve odak tetikleyiciye döner.
• Onay ve radyo öğeleri menüyü açık tutar.
• Devre dışı öğeler ok tuşlarıyla vurgulanabilir; nedenleri okunur.
• Yer yoksa menü ters yana geçer; uzun menü kendi içinde kayar.

Yönergeler

• Öğe etiketlerini fiille başlatın.
• Tehlikeli öğeyi en sona, bir ayırıcıdan sonra koyun ve AlertDialog ile onaylatın.
• Devre dışı öğeyi gizlemek yerine nedenini yazın; yetkisi olmayan kullanıcıya hiç göstermeyin.
• Alt menüyü tek düzeyle sınırlayın.
• Kısayolu yalnızca uygulamada gerçekten bağlıysa gösterin.

İçerik

Türkçe	İngilizce
Diğer işlemler	More actions
Düzenle	Edit
Çoğalt	Duplicate
Sil	Delete

Cam

Provider material="glass" altında menü ve alt menüleri cama döner; vurgulanan satır yarı saydam seçili dolgusunu korur. material="solid" onu opak tutar.

İlgili bileşenler

• Kbd: Kısayol tuşları.
• IconButton: “Diğer işlemler” tetikleyicisi.
• AlertDialog: Tehlikeli öğeyi onaylatmak için.
• Popover: Etkileşimli içerik için.