Command

Ne zaman kullanılır

Command, uygulamanın sayfalarına ve eylemlerine klavyeden hızlı erişim içindir. CommandDialog uygulama genelinde ⌘K ya da Ctrl+K ile açılır; Command aynı listeyi bir panelin içinde gösterir.

Ne zaman kullanılmaz

• Bir form alanında seçim için: Combobox kullanın.
• İçerik araması için: Sonuçları ayrı bir arama sayfasında listeleyin.
• Tek başına gezinme yolu olarak: Palet kısayoldur; her komut arayüzde de bulunmalıdır.

Anatomi

Sayfalar

Ana sayfa

Ayarlar

Eylemler

Yeni dosya oluştur⌘N

Kaydet⌘S

Temayı değiştir

↑↓gezin↵seç

AçıkKoyu

Kodu kopyala

import { Command, type CommandGroup } from '@bigbang/ui';

const groups: CommandGroup[] = [
  {
    label: 'Sayfalar',
    items: [
      { value: 'home', label: 'Ana sayfa', icon: 'home', onSelect: () => {} },
      { value: 'settings', label: 'Ayarlar', icon: 'settings', keywords: ['tercihler'], onSelect: () => {} },
    ],
  },
  {
    label: 'Eylemler',
    items: [
      { value: 'new', label: 'Yeni dosya oluştur', icon: 'plus', shortcut: ['⌘', 'N'], onSelect: () => {} },
      { value: 'save', label: 'Kaydet', icon: 'download', shortcut: ['⌘', 'S'], onSelect: () => {} },
      { value: 'theme', label: 'Temayı değiştir', icon: 'moon', onSelect: () => {} },
    ],
  },
];

export default function Default() {
  return (
    <Command groups={groups} className="max-w-xl" />
  );
}

1. Arama girişi: Büyüteç ikonu ve erişilebilir ad.
2. Grup başlığı: “Sayfalar”, “Eylemler” gibi.
3. Komut: İkon, etiket ve isteğe bağlı kısayol tuşları.
4. Boş durum: Hiçbir şey eşleşmediğinde.
5. Tuş ipuçları: Gezinme, seçme ve kapatma tuşları; 640 px’in altında gizlenir.

Davranış

• Yazmak komutları etiket ve keywords alanında, Provider dilinde büyük-küçük harf gözetmeden süzer; boş kalan gruplar gizlenir.
• İlk eşleşen komut kendiliğinden vurgulanır; Enter onu çalıştırır. Ok tuşları komutlar arasında gezer.
• Komut çalışınca arama temizlenir. CommandDialog’da pencere önce kapanır, odak açan öğeye döner.
• CommandDialog ⌘K ya da Ctrl+K ile açılıp kapanır; Escape ve dışarı tıklama da kapatır.
• Pencere 8 px yükselerek, solarak ve büyüyerek açılır; arka plan solar. Kapanış daha hızlıdır. Hareketi azaltma tercihinde yalnızca saydamlık değişir.

Yönergeler

• Komutları en fazla dört grupta toplayın; en sık kullanılanları üste koyun.
• Kısayolları yalnızca gerçekten kayıtlı olduklarında gösterin.
• Eş anlamlıları keywords ile ekleyin.
• Geri alınamayan komutlar için çalıştırmadan önce onay isteyin.

İçerik

• Eylem komutları fiille başlar: “Yeni dosya oluştur”. Sayfa komutları sayfanın adıdır.
• Grup başlıkları kısa ad öbekleridir.

Türkçe	İngilizce
Komut paleti	Command palette
Komut ya da sayfa arayın	Search commands or pages
gezin	move
seç	choose
kapat	close

Cam

Provider material="glass" altında CommandDialog cama döner. Satır içi Commandın kendi yüzeyi yoktur. material="solid" onu opak tutar.

İlgili bileşenler

• Combobox: Form içinde yazarak seçim.
• Toolbar: Görünür, sık eylemler.
• AppShell: Paleti açan arama düğmesinin durduğu uygulama çerçevesi.