Action cluster
Primary, secondary, and overflow actions
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let actionClusterExample =
div {
_dataSignals "{actionMessage: 'No action requested.'}"
_class "grid gap-3"
ActionCluster.create "account-actions-example" [
ApplicationAction.link "/components/page-examples/account-management?destination=ledger-create-account" "New account"
|> ApplicationAction.withVariant ButtonVariant.Primary
ApplicationAction.link "/components/collection" "View accounts" ]
|> ActionCluster.withOverflow [
MenuItem.link "/components/theming" "Account settings"
MenuItem.destructiveAction "$actionMessage = 'Archive requested.'" "Archive account" ]
|> ActionCluster.render id
output { _ariaLive "polite"; _dataText "$actionMessage"; _class "text-sm text-[var(--fve-muted-text)]"; "No action requested." }
}Pending action
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let pendingActionClusterExample =
div {
_dataSignals "{actionMessage: 'No action requested.'}"
_class "grid gap-3"
ActionCluster.create "pending-actions-example" [
ApplicationAction.command "$actionMessage = 'Refresh requested.'" "Refresh"
|> ApplicationAction.pending
ApplicationAction.link "/components/collection" "View accounts" ]
|> ActionCluster.render id
output { _ariaLive "polite"; _dataText "$actionMessage"; _class "text-sm text-[var(--fve-muted-text)]"; "No action requested." }
}