Scorciatoie da tastiera
useKeymap, sequenze, overlay di aiuto ?, suggerimenti sui tasti e palette dei comandi.
Dichiara le scorciatoie una volta con useKeymap. Text.js le instrada, le elenca in un pannello in sovrimpressione ?, le mostra nel footer e le rende ricercabili in una palette dei comandi.
useKeymap( { "j, down": { label: "Next", run: next, hint: true }, "k, up": { label: "Previous", run: previous }, "g g": { label: "Go to top", run: top }, "ctrl+s": { label: "Save", run: save, hint: true }, }, { group: "Navigation" },);return ( <> <StatusBar right={<Text color="subtle">main</Text>}> <KeyHints /> </StatusBar> <CommandPalette commands={commands} /> <KeyHelp /> </>);useKeymap
| Sintassi | Significato |
|---|---|
ctrl+k | Modificatori: ctrl alt shift meta mod |
mod+k | ⌘ o Ctrl, a seconda di quale tieni premuto |
j, down | Alternative |
g g | Una sequenza (1 secondo tra i tasti) |
G | La maiuscola implica Shift |
? | I tasti stampabili corrispondono al carattere |
I valori sono un handler oppure un’associazione con label, group, hint, disabled e noRepeat. Le associazioni senza etichetta funzionano, ma non compaiono nel pannello di aiuto in sovrimpressione.
useKeymapBindings() restituisce le associazioni con etichetta attualmente attive, da usare nei tuoi footer e menu.
Le mappe dei tasti passano attraverso useInput, quindi si applicano le regole abituali: gli input con il focus hanno la precedenza, un tasto corrispondente interrompe la propagazione e un <Modal> aperto disabilita le associazioni al di fuori di esso. Passa { priority, global, isActive } per cambiare questo comportamento.
<KeyHelp>
Premi ? per vedere tutte le associazioni con etichetta, suddivise in gruppi. Elenca quelle attive nel contesto in cui è stato aperto.
<KeyHelp keys="?" title="Keyboard shortcuts" /><KeyHints> e <StatusBar>
<KeyHints /> mostra le associazioni contrassegnate con hint: true oppure gli items espliciti. <StatusBar> è un footer di una riga con uno slot right.
<StatusBar right={<Text color="subtle">▼ iad1</Text>}> <KeyHints items={[{ keys: "ctrl+k", label: "commands" }]} /></StatusBar><Kbd>mod+k</Kbd> visualizza un singolo tasto. formatKeys("ctrl+shift+p") restituisce ⌃⇧P su macOS e ctrl+shift+P altrove.
<CommandPalette>
Ctrl+K (o Ctrl+P) apre un selettore con ricerca approssimata tra i tuoi comandi e tutte le associazioni con etichetta, con le lettere corrispondenti evidenziate.
<CommandPalette commands={[{ id: "theme", label: "Toggle theme", group: "View", run: toggleTheme }]}/>| Prop | Descrizione |
|---|---|
commands | { id, label, group?, keys?, keywords?, run }[] |
keys | Scorciatoia di apertura (predefinita ctrl+k, ctrl+p; null per disabilitarla) |
includeKeymap | Elenco delle associazioni della mappa dei tasti (predefinito true) |
open / onOpenChange | Controllato |
La palette si chiude prima di eseguire un comando, quindi i comandi possono aprire le proprie finestre modali. fuzzyMatch e fuzzyFilter sono esportati per le tue liste.