Resizable

Split content into pointer- and keyboard-resizable horizontal or vertical panels.

Content

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultResizablePanels =
    let leading = ResizablePanel.create (aside { _class "h-full p-4"; "Navigation" })
    Resizable.create "default-workspace-panels" "Workspace panels" leading (div { _class "h-full p-4"; "Content" })
    |> Resizable.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add resizable --config src/Acme.Components/fve.json

The 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 defaultResizablePanels =
    let leading = ResizablePanel.create (aside { _class "h-full p-4"; "Navigation" })
    Resizable.create "default-workspace-panels" "Workspace panels" leading (div { _class "h-full p-4"; "Content" })
    |> Resizable.render

Horizontal split panels

Operating account

Resize the supporting list without changing the route or persisting a layout preference.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let resizablePanels =
    let navigationPanel =
        ResizablePanel.create (aside { _class "h-full bg-[var(--fve-surface-subtle)] p-4"; strong { "Accounts" }; p { _class "mt-2 text-sm text-[var(--fve-muted-text)]"; "Operating\nSavings\nTax reserve" } })
        |> ResizablePanel.withInitialSize 34
        |> ResizablePanel.withBounds 20 60
        |> ResizablePanel.collapsible 0
    Resizable.create "account-workspace-panels" "Account workspace panels" navigationPanel (div { _class "h-full p-4"; h3 { _class "font-semibold"; "Operating account" }; p { _class "mt-2 text-sm text-[var(--fve-muted-text)]"; "Resize the supporting list without changing the route or persisting a layout preference." } })
    |> Resizable.render

Vertical split panels

Review summary

Three entries need attention.

Entry details

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let verticalResizablePanels =
    let summaryPanel =
        ResizablePanel.create (section { _class "h-full p-4"; strong { "Review summary" }; p { _class "mt-2 text-sm text-[var(--fve-muted-text)]"; "Three entries need attention." } })
        |> ResizablePanel.withInitialSize 40
        |> ResizablePanel.withBounds 25 70
    Resizable.create "review-workspace-panels" "Review panels" summaryPanel (section { _class "h-full bg-[var(--fve-surface-subtle)] p-4 text-sm"; "Entry details" })
    |> Resizable.withOrientation ResizableOrientation.Vertical
    |> Resizable.render

API reference

type ResizableOrientation =
    | Horizontal
    | Vertical

type ResizablePanel

type ResizableConfig

/// Resizing state is local; durable layout persistence remains consumer-owned.
module Resizable =
    val create : id:string -> label:string -> leading:ResizablePanel -> trailing:HtmlElement -> ResizableConfig
    val withOrientation : orientation:ResizableOrientation -> config:ResizableConfig -> ResizableConfig
    val withAttributes : attributes:HtmlAttribute list -> config:ResizableConfig -> ResizableConfig
    val render : config:ResizableConfig -> HtmlElement

module ResizablePanel =
    val create : content:HtmlElement -> ResizablePanel
    val withInitialSize : percent:int -> panel:ResizablePanel -> ResizablePanel
    val withBounds : minimum:int -> maximum:int -> panel:ResizablePanel -> ResizablePanel
    val collapsible : collapsedSize:int -> panel:ResizablePanel -> ResizablePanel