Playground
Die Component unterstützt ein Array von keys. Die einzelnen keys werden als
Strings übergeben. Wenn dabei die Werte "mod", "alt" oder "shift" verwendet
werden, wird automatisch das passende Tastensymbol angezeigt – abhängig davon,
ob der User macOS oder Windows verwendet. Dadurch werden die jeweiligen
Tastenbezeichnungen plattformspezifisch korrekt dargestellt, ohne dass
zusätzliche Logik implementiert werden muss.
import { Kbd } from "@mittwald/flow-react-components"; <Kbd keys={["mod", "k"]} />
Children
Um flexiblere Shortcuts darzustellen, unterstützt die Component auch
children. Hierbei ist darauf zu achten, dass Kbd Komponenten für die
einzelnen Keys gesetzt werden müssen, um semantisch korrekte
kbd-HTML-Elemente
zu erzeugen.
Varianten
Die Component wird in den Varianten plain und soft angeboten. Für die
Darstellung von Shortcuts direkt an Bedienelementen sollte die Variante plain
verwendet werden, da sie sich dezent in die Oberfläche einfügt und nicht zu
aufdringlich wirkt. Innerhalb von erklärenden Texten oder Beschreibungen sollte
hingegen die Variante soft eingesetzt werden, um hervorzuheben, dass es sich um
einen Keyboard-Shortcut handelt.
Kombiniere mit …
SearchField
Wenn eine Suche durch einen Keyboard-Shortcut fokussiert werden kann, kann die Kbd Component mit dem SearchField kombiniert werden, um dem User das verfügbare Tastaturkürzel sichtbar zu machen.
ContextMenu
In ContextMenus werden häufig Aktionen angezeigt, die zusätzlich per Keyboard-Shortcut ausgelöst werden können. In diesem Fall kann Kbd mit dem jeweiligen MenuItem kombiniert werden.
Text
Wird die Kbd Component innerhalb eines
Texts verwendet, wird sie automatisch in
der soft Variante dargestellt. Dadurch hebt sie sich visuell vom Fließtext ab
und macht deutlich, dass es sich um einen Keyboard-Shortcut handelt.