Raccourcis clavier
useKeymap, séquences, aide superposée ?, indications de touches et palette de commandes.
Déclarez les raccourcis une seule fois avec useKeymap. Text.js les achemine, les répertorie dans un panneau superposé ?, les affiche dans votre pied de page et les rend accessibles par recherche dans une palette de commandes.
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
| Syntaxe | Signification |
|---|---|
ctrl+k | Modificateurs : ctrl alt shift meta mod |
mod+k | ⌘ ou Ctrl, selon la touche maintenue |
j, down | Alternatives |
g g | Une séquence (1 seconde entre les touches) |
G | La majuscule implique Shift |
? | Les touches imprimables correspondent au caractère |
Les valeurs sont un gestionnaire ou une liaison avec label, group, hint, disabled et noRepeat. Les liaisons sans libellé fonctionnent, mais ne figurent pas dans le panneau d’aide.
useKeymapBindings() renvoie les liaisons avec libellé actuellement actives, pour vos propres pieds de page et menus.
Les keymaps passent par useInput, les règles habituelles s’appliquent donc : les champs de saisie ayant le focus sont prioritaires, une touche reconnue arrête la propagation et un <Modal> ouvert désactive les liaisons à l’extérieur. Passez { priority, global, isActive } pour modifier ce comportement.
<KeyHelp>
Appuyez sur ? pour afficher toutes les liaisons avec libellé, par groupe. Le panneau répertorie les liaisons actives à l’endroit où il a été ouvert.
<KeyHelp keys="?" title="Keyboard shortcuts" /><KeyHints> et <StatusBar>
<KeyHints /> affiche les liaisons marquées hint: true, ou les items explicites. <StatusBar> est un pied de page d’une ligne avec un emplacement right.
<StatusBar right={<Text color="subtle">▼ iad1</Text>}> <KeyHints items={[{ keys: "ctrl+k", label: "commands" }]} /></StatusBar><Kbd>mod+k</Kbd> affiche une seule touche. formatKeys("ctrl+shift+p") donne ⌃⇧P sur macOS et ctrl+shift+P ailleurs.
<CommandPalette>
Ctrl+K (ou Ctrl+P) ouvre un lanceur à recherche approximative parmi vos commandes et toutes les liaisons avec libellé, avec les lettres correspondantes en surbrillance.
<CommandPalette commands={[{ id: "theme", label: "Toggle theme", group: "View", run: toggleTheme }]}/>| Prop | Description |
|---|---|
commands | { id, label, group?, keys?, keywords?, run }[] |
keys | Raccourci d’ouverture (par défaut ctrl+k, ctrl+p ; null pour désactiver) |
includeKeymap | Affichage des liaisons du keymap (par défaut true) |
open / onOpenChange | Contrôle externe |
La palette se ferme avant d’exécuter une commande, les commandes peuvent donc ouvrir leurs propres fenêtres modales. fuzzyMatch et fuzzyFilter sont exportés pour vos propres listes.