Separator

Separate related content visually while preserving the intended semantic orientation.

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

let defaultSeparator =
    div { _class "w-full"; Separator.create () |> Separator.render }

On this page

Installation

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

dotnet fve add separator --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 defaultSeparator =
    div { _class "w-full"; Separator.create () |> Separator.render }

Orientation and semantics

Account details

Contact and billing information

ProfileSecurity

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

let separatorExamples =
    div {
        _class "grid gap-5"
        div { p { _class "mb-3 text-sm font-medium"; "Account details" }; Separator.create () |> Separator.semantic |> Separator.render; p { _class "mt-3 text-sm text-[var(--fve-muted-text)]"; "Contact and billing information" } }
        div { _class "flex h-8 items-center gap-4"; span { "Profile" }; Separator.create () |> Separator.withOrientation SeparatorOrientation.Vertical |> Separator.render; span { "Security" } }
    }

API reference

type SeparatorOrientation =
    | Horizontal
    | Vertical

type SeparatorConfig

module Separator =
    val create : SeparatorConfig
    val withOrientation : orientation:SeparatorOrientation -> config:SeparatorConfig -> SeparatorConfig
    val semantic : config:SeparatorConfig -> SeparatorConfig
    val withAttributes : attributes:HtmlAttribute list -> config:SeparatorConfig -> SeparatorConfig
    val render : config:SeparatorConfig -> HtmlElement

Separator

Default

Installation

Usage

Orientation and semantics

API reference