Shortcut
⌘K ya da Ctrl+K gibi bir tuş kombinasyonu; Kbd tuşlarından oluşur. mod macOS'ta ⌘, diğer platformlarda Ctrl olur; ekran okuyucular tuşların tam adlarını duyar.
Aramak için Control + K, komutlar için Control + Shift + P tuşlarına bas.
<Text>
Aramak için <Shortcut keys={["mod", "k"]} />, komutlar için <Shortcut keys={["mod", "shift", "p"]} /> tuşlarına bas.
</Text>Import
import { Shortcut, formatShortcut, matchesShortcut } from "@meridui/react";Örnekler
Platformlar ve boyutlar
Platform hydration'dan sonra algılanır (sunucu Mac olmayan biçimi render'lar). platform ile sabitleyebilirsin. Tuşlar: mod, ctrl, meta, alt, shift, enter, escape, tab, backspace, delete, space, oklar (arrowup…) ve herhangi tek bir karakter.
<Shortcut keys={["mod", "shift", "z"]} platform="mac" />
<Shortcut keys={["mod", "shift", "z"]} platform="other" />
<Shortcut keys={["alt", "arrowup"]} platform="mac" size="sm" labels={{ arrowup: "Yukarı ok" }} />
<Shortcut keys={["alt", "arrowup"]} platform="other" size="sm" labels={{ arrowup: "Yukarı ok" }} />Tuş basışlarını eşleştirmek
matchesShortcut(event, keys) aynı kuralları kullanır; böylece gösterdiğin ile yakaladığın kombinasyon hiç ayrışmaz. Değiştirici tuşlar birebir eşleşmelidir.
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
if (matchesShortcut(event, ["mod", "s"])) {
event.preventDefault();
save();
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, []);formatShortcut(["mod", "k"]), yalnızca metin alan yerler (bir title ya da aria-keyshortcuts ipucu) için düz metni ("⌘K" ya da "Ctrl+K") döndürür.
API referansı
children dışındaki tüm <kbd> attribute'larını kabul eder.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
keys | string[] | – | Birlikte basılan tuşlar, örneğin ["mod", "k"]. |
platform | "auto" | "mac" | "other" | "auto" | Platformu sabitler; auto hydration'dan sonra algılar. |
size | "sm" | "md" | "md" | Tuş boyutu. |
labels | Record<string, string> | – | İngilizce varsayılanlarla birleştirilen okunan tuş adları, örneğin { shift: "Üst karakter" }. .mac ya da .other ile biten anahtarlar tek platform için geçerlidir. |
joiner | string | "+" | Ekran okuyucunun tuşlar arasında okuduğu kelime. |
ref | Ref<HTMLElement> | – | Dıştaki <kbd>'ye iletilen ref. |
Yardımcı fonksiyonlar
| Fonksiyon | Döndürdüğü |
|---|---|
formatShortcut(keys, platform?) | "⌘K" / "Ctrl+K" |
matchesShortcut(event, keys, platform?) | event tam olarak keys'e basıyorsa true |
keySymbol(key, platform), keyLabel(key, platform, labels?) | Tek bir tuşun sembolü ya da okunan adı |
detectPlatform(), usePlatform() | "mac" ya da "other" |
Stil verme
Shortcut, .mrd-shortcut sınıflı bir .mrd-kbd'dir; her tuş iç içe bir <kbd class="mrd-shortcut__key">'dir. Mac olmayan platformlarda tuşların arasına CSS ile soluk bir + çizilir. Dıştaki elemanda data-platform ve data-size bulunur.
Erişilebilirlik
İç içe <kbd> elemanları, bir tuş kombinasyonunu işaretlemenin HTML yoludur. Görünür semboller (⌘, ⇧, ⌥) yardımcı teknolojilerden gizlenir ve yerlerine görsel olarak gizli adlar ("Command + Shift + P") okunur; bunları labels ile çevirebilirsin.