LivaSpotlight
Klavye kısayoluyla açılan, aranabilir bir komut paleti. Eylem listesi
actions prop'uyla verilir; kullanıcı yazdıkça label, description ve
keywords alanlarında arama yapılır, eylemler group alanına göre
başlıklar altında toplanır. Palet açıkken ok tuşlarıyla gezilir, Enter ile
seçilir, Escape ile kapanır. Bileşen document.body içine portal ile
çizilir; kapalıyken DOM'a hiçbir şey eklemez.
import { LivaSpotlight, type LivaSpotlightAction } from "@dataliva/livalib";
Komut paleti
Varsayılan kısayol Ctrl+K'dır (macOS'ta Cmd+K). Aşağıdaki örnek isOpen ve
onOpenChange ile kontrollü kullanımı gösterir; butonla ya da kısayolla
açabilirsiniz. Bir eylem seçildiğinde palet kapanır ve eylemin onClick
fonksiyonu çalışır.
Özel kısayol ve limit
shortcut prop'u Ctrl/Cmd ile birlikte basılacak tuşu değiştirir; limit
aynı anda listelenecek en fazla eylem sayısını sınırlar. Bu örnek Ctrl+M
ile açılır ve dört eylemden en fazla üçünü listeler.
Not: Kısayol dinleyicisi bileşen mount olduğu sürece pencere genelinde
aktiftir. Aynı sayfada birden fazla LivaSpotlight kullanılacaksa her
birine farklı bir shortcut verilmelidir.
| Prop | Tip | Varsayılan |
|---|---|---|
actions | LivaSpotlightAction[] | — (zorunlu) |
shortcut | string | 'k' |
searchPlaceholder | string | 'Search...' |
nothingFoundMessage | string | 'Nothing found...' |
limit | number | 10 |
isOpen | boolean | — (verilirse kontrollü mod) |
onOpenChange | (isOpen: boolean) => void | — |
LivaSpotlightAction
| Alan | Tip | Açıklama |
|---|---|---|
id | string | Benzersiz eylem kimliği (zorunlu) |
label | string | Listede görünen başlık (zorunlu) |
description | string | Başlığın altındaki açıklama |
group | string | Eylemin toplandığı grup başlığı |
onClick | () => void | Eylem seçildiğinde çalışır (zorunlu) |
leftSection | ReactNode | Sol tarafta ikon/işaret |
rightSection | ReactNode | Sağ tarafta kısayol/rozet |
keywords | string[] | Aramaya dahil edilen ek anahtar kelimeler |