Key
This component is analogous to the <kbd> HTML element, but with an API consistent with the other components in this package, and styled to look familiar in a Fluent UI React app.
Coming Soon
Pictures
Coming Soon
Examples
Type Aliases
Type Aliases
FDomKey
Ƭ FDomKey: "" | "Escape" | "Digit1" | "Digit2" | "Digit3" | "Digit4" | "Digit5" | "Digit6" | "Digit7" | "Digit8" | "Digit9" | "Digit0" | "Minus" | "Equal" | "Backspace" | "Tab" | "KeyA" | "KeyB" | "KeyC" | "KeyD" | "KeyE" | "KeyF" | "KeyG" | "KeyH" | "KeyI" | "KeyJ" | "KeyK" | "KeyL" | "KeyM" | "KeyN" | "KeyO" | "KeyP" | "KeyQ" | "KeyR" | "KeyS" | "KeyT" | "KeyU" | "KeyV" | "KeyW" | "KeyX" | "KeyY" | "KeyZ" | "BracketLeft" | "BracketRight" | "Enter" | "ControlLeft" | "ControlRight" | "Semicolon" | "Quote" | "Backquote" | "ShiftLeft" | "Backslash" | "Comma" | "Period" | "Slash" | "ShiftRight" | "NumpadMultiply" | "AltLeft" | "Space" | "CapsLock" | "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | "F13" | "F14" | "F15" | "F16" | "F17" | "F18" | "F19" | "F20" | "F21" | "F22" | "F23" | "F24" | "Pause" | "ScrollLock" | "Numpad0" | "Numpad1" | "Numpad2" | "Numpad3" | "Numpad4" | "Numpad5" | "Numpad6" | "Numpad7" | "Numpad8" | "Numpad9" | "NumpadSubtract" | "NumpadAdd" | "NumpadDecimal" | "NumpadEqual" | "NumpadDivide" | "IntlBackslash" | "NumpadComma" | "MediaTrackPrevious" | "MediaTrackNext" | "NumpadEnter" | "AudioVolumeMute" | "MediaPlayPause" | "MediaStop" | "AudioVolumeDown" | "AudioVolumeUp" | "BrowserHome" | "BrowserStop" | "BrowserBack" | "BrowserForward" | "BrowserSearch" | "BrowserFavorites" | "BrowserRefresh" | "NumpadDivide" | "PrintScreen" | "AltRight" | "AltLeft" | "NumLock" | "Pause" | "Home" | "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "PageUp" | "PageDown" | "End" | "Insert" | "Delete" | "LaunchMail" | "LaunchApp1" | "LaunchApp2" | "ContextMenu" | "MetaLeft" | "MetaRight" | "MediaSelect"
The set of values that KeyboardEvent#code can be. It is guaranteed that KeyboardEvent#code can be safely cast to FDomKey.
Defined in
FKeyClassNames
Ƭ FKeyClassNames: "StringContainer" | "Root"
The class names used to style the Key component.
Defined in
Component/Key/Key.Types.ts:196
FKeyDisplay
Ƭ FKeyDisplay: "Full" | "Inline" | "Mini"
The display style of a Key component.
Defined in
Component/Key/Key.Types.ts:161
FKeyRepresentation
Ƭ FKeyRepresentation: string | ReactElement
FDomKeys are represented with strings and FluentIcons.
Defined in
Component/Key/Key.Types.ts:204
FKeyStyles
Ƭ FKeyStyles: TStyles<FKeyClassNames>
The makeStyles hook of the Key component.
Defined in
Component/Key/Key.Types.ts:201
PKey
Ƭ PKey: FStylable & { BackgroundColor?: string ; Color?: string ; CornerDirection?: boolean ; Display?: FKeyDisplay ; Key: FDomKey }
Properties for the Key component.
Defined in
Component/Key/Key.Types.ts:177
SKey
Ƭ SKey: FStylable & FStyledState & Pick<PKey, "BackgroundColor" | "Color" | "CornerDirection" | "Display"> & { Representation: FKeyRepresentation[] }
The state of the Key component.