Bileşenler

Command

Gruplu komutları ve kısayolları arayıp çalıştıran palet; yerinde ya da ⌘K ile açılan pencerede.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Yazarak komutları süzün; ok tuşlarıyla gezin, Enter ile çalıştırın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Command komutları gruplar halinde listeler. Arama etiketlere ve keywords alanına bakar; shortcut tuşları sağda gösterir.

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" />
  );
}

Pencerede

CommandDialog paleti sayfanın üstünde açar. Varsayılan olarak ⌘K ya da Ctrl+K ile açılır; örnekte kısayol hotkey={false} ile kapalıdır. Komut seçilince pencere kapanır.

import { Button, CommandDialog, type CommandGroup } from '@bigbang/ui';
import { useState } from 'react';

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 Dialog() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Komut paletini aç
      </Button>
      <CommandDialog groups={groups} open={open} onOpenChange={setOpen} hotkey={false} />
    </>
  );
}

Tuş ipuçları olmadan

hints={false} listenin altındaki tuş ipuçlarını gizler.

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 WithoutHints() {
  return (
    <Command groups={groups} hints={false} className="max-w-xl" />
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

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" />
  );
}