Skip to main content

Composition and control flow

Compose views with ordinary functions and use F# conditionals and loops directly inside element computation expressions.

On this page

Overview

Compose views with ordinary functions and use F# conditionals and loops directly inside element computation expressions.

Functions as components

let navigationItem current href label =
    li {
        a {
            _href href
            if current then _ariaCurrent "page"
            label
        }
    }

Conditional content

div {
    if validationErrors.IsEmpty then
        p { _class "success"; "Ready to submit." }
    else
        ul {
            for error in validationErrors do
                li { error }
        }
}

Sequences

The builders support for expressions over sequences. Keep rendering deterministic: build a fresh mutable element tree for each response rather than mutating or concurrently rendering one instance.

ul {
    for item in items do
        li { _data("item-id", item.id); item.label }
}