Floating panel
Open non-modal panel
Workspace guide
Helpful context remains available beside the application.
Use this space for contextual guidance that should not block the primary task.
Open operationsopen System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let floatingPanelContent =
div {
_class "grid gap-3 text-sm"
p { "Use this space for contextual guidance that should not block the primary task." }
a { _href "/components/page-examples/operations-dashboard"; _class "font-semibold text-[var(--fve-brand-text)] underline-offset-2 hover:underline"; "Open operations" }
}
let floatingPanelExample =
FloatingPanel.create "workspace-guide" "Workspace guide" floatingPanelContent
|> FloatingPanel.withDescription "Helpful context remains available beside the application."
|> FloatingPanel.withinContainer
|> FloatingPanel.renderMinimized with restore
Workspace guide
Use this space for contextual guidance that should not block the primary task.
Open operationsopen System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let floatingPanelContent =
div {
_class "grid gap-3 text-sm"
p { "Use this space for contextual guidance that should not block the primary task." }
a { _href "/components/page-examples/operations-dashboard"; _class "font-semibold text-[var(--fve-brand-text)] underline-offset-2 hover:underline"; "Open operations" }
}
let minimizedFloatingPanelExample =
FloatingPanel.create "minimized-workspace-guide" "Workspace guide" floatingPanelContent
|> FloatingPanel.withinContainer
|> FloatingPanel.minimized
|> FloatingPanel.render