Command
Search grouped destinations and actions with ranked matching, keyboard navigation, and an optional dialog palette.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add command --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 defaultCommand =
Command.create "command-default" "Find a component" [
CommandGroup.create "Components" [
CommandItem.link "/components/table" "Table"
CommandItem.link "/components/month-calendar" "Month calendar" ] ]
|> Command.render idGroups, icons and shortcuts
Actions and disabled items
Dialog palette
Empty results
API reference
type CommandItem<'destination>
type CommandGroup<'destination>
type CommandConfig<'destination>
/// Shortcut labels do not register hotkeys. Matching ranks titles before keywords and descriptions;
/// group order, available commands and trusted action effects remain consumer-owned.
module Command =
val create : id:string -> label:string -> groups:CommandGroup<'a> list -> CommandConfig<'a>
val withPlaceholder : placeholder:string -> config:CommandConfig<'destination> -> CommandConfig<'destination>
val withEmptyState : label:string -> config:CommandConfig<'a> -> CommandConfig<'a>
val withAttributes : attributes:HtmlAttribute list -> config:CommandConfig<'destination> -> CommandConfig<'destination>
val render : resolve:('a -> string) -> config:CommandConfig<'a> -> HtmlElement
val triggerAttributes : config:CommandConfig<'a> -> HtmlAttribute list
val trigger : label:string -> config:CommandConfig<'a> -> HtmlElement
val renderDialog : resolve:('a -> string) -> config:CommandConfig<'a> -> HtmlElement
module CommandGroup =
val create : label:string -> items:CommandItem<'a> list -> CommandGroup<'a>
module CommandItem =
val link : destination:'a -> label:string -> CommandItem<'a>
val action : expression:string -> label:string -> CommandItem<'a>
val withKeywords : keywords:string list -> item:CommandItem<'a> -> CommandItem<'a>
val withDescription : description:string -> item:CommandItem<'a> -> CommandItem<'a>
val withLeading : leading:HtmlElement -> item:CommandItem<'a> -> CommandItem<'a>
val withShortcut : shortcut:string -> item:CommandItem<'a> -> CommandItem<'a>
val disabled : item:CommandItem<'a> -> CommandItem<'a>