Panoramica
ImportaShortcut e formatShortcut da twenty-ui/primitives/typography. Entrambi condividono lo stesso modello, gli stessi simboli e separatori. Registra le scorciatoie nella tua applicazione. Shortcut formatta solo il suggerimento; non registra azioni della tastiera. Attributi nativi, gestori di eventi, stili, nomi di classi e ref sono destinati al relativo span esterno. ShortcutProps e ShortcutFormatOptions sono tipi pubblici.
Utilizzo
Combinazioni e sequenze
['Mod', 'K'] significa premere Mod e K insieme. Un array annidato è una sequenza ordinata: [['G'], ['P']] significa premere G, poi P. Ogni array annidato è una combinazione, quindi [['Mod', 'K'], ['Mod', 'C']] significa premere Mod e K, poi Mod e C. Usa un array a un elemento per un singolo tasto. Entrambe le forme di array possono essere readonly.
Mod e CommandOrControl visualizzano Command su macOS e iOS, e Control altrove. Anche i tasti espliciti Command, Control, Alt e Enter hanno etichette visualizzate. Le altre stringhe vengono visualizzate come fornite. Il rilevamento del dispositivo è sicuro senza globali del browser; platform lo sostituisce facoltativamente con mac o other.
Usa sequenceJoinLabel per il testo di unione localizzato. combinationSeparator può mantenere una convenzione dell’host come +. Il separatore di testo predefinito è vuoto sui dispositivi Apple e uno spazio altrove. variant seleziona keys, text o button. visibility="desktop" nasconde il suggerimento alle larghezze della viewport mobile, mentre always rimane visibile.
I simboli dei tasti hanno nomi accessibili leggibili. Usa accessibleKeyLabels per localizzare i nomi dei singoli tasti nell’output dello screen reader. Fornisci aria-label o aria-labelledby per un nome localizzato dell’intera scorciatoia, oppure aria-hidden per un suggerimento decorativo. I pulsanti mantengono i nomi delle azioni e nascondono i suggerimenti decorativi sui dispositivi mobili. Le righe dei menu e degli elenchi mantengono visibili i suggerimenti.
Aspetto
Usakeys per i singoli tasti, text per un suggerimento in linea oppure button per il suggerimento compatto all’interno di un’azione. Queste varianti modificano solo la presentazione.
Migrazione
Gli array piatti archiviati che rappresentano pressioni di tasti successive devono essere annidati prima di essere passati a
shortcut: hotKeys.map((key) => [key]). Gli array che rappresentano tasti simultanei possono essere passati direttamente. Le stringhe dei tasti restano token letterali, quindi ['Mod', '+'] contiene un tasto più e ['Space'] contiene il tasto Space; non è necessario alcun parsing delle stringhe di scorciatoia.
Props
Readonly<Record<string, string>>
Optional localized names for individual keys in screen reader output.
string
Optional separator between simultaneous keys. Defaults to no separator on Apple devices and a space elsewhere.
"mac" | "other"
Optional mac or other platform override. Defaults to server-safe device detection.
string
Text between sequence steps. Defaults to then.
ShortcutDefinition
obbligatorio
Flat key array for a simultaneous combination, or nested key arrays for an ordered sequence of combinations.
"button" | "keys" | "text"
predefinito:"keys"
Keycaps, inline text, or a separated button hint.
"always" | "desktop"
predefinito:"always"
Always visible by default. Desktop hints hide on mobile viewports.