Kbd
Render keyboard keys and shortcut groups as compact instructional content.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add kbd --config src/Acme.Components/fve.jsonThe CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.
Usage
open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar
let keyboardKey = Kbd.create "Esc" |> Kbd.renderShortcut group
API reference
type KbdConfig
/// Key labels are presentational; the consumer registers any keyboard handlers.
module Kbd =
val create : key:string -> KbdConfig
val shortcut : keys:string list -> KbdConfig
val withLabel : label:string -> config:KbdConfig -> KbdConfig
val withAttributes : attributes:HtmlAttribute list -> config:KbdConfig -> KbdConfig
val render : config:KbdConfig -> HtmlElement