Elements and Decorations

BlazorCodeFirst mirrors HTML directly: every element you write in a Body expression names the element it produces. There is no intermediate widget vocabulary to learn and no runtime UI tree — the source generator turns these calls into RenderTreeBuilder instructions at compile time.

Elements#

Element helpers take mixed string and element children in brackets:

using BlazorCodeFirst;
using static BlazorCodeFirst.Html;

protected override View Body =>
    Article[
        H2["Elements"],
        P["Text and ", A.Href("/docs")["links"], " compose in one call."],
        Ul[
            Li["Structure: Div, Section, Article, Header, Footer, Main, Aside, Nav"],
            Li["Text: Span, P, H1 through H6"],
            Li["Lists: Ul, Ol, Li"],
            Li["Interactive: Button"],
            Li["Links and media: A, Img"]]];

For an element without a dedicated helper, use Element with a compile-time constant tag:

Element("figure")[Img.Src("/diagram.png").Alt("Architecture")]

Decorations#

Decorations are chained onto the element they belong to. They collapse into the owning element's attributes rather than introducing wrapper nodes:

Button
    .Class("btn btn-primary")
    .Title("Save the current document")
    .OnClick(() => Save())["Save"];

Available decorations are .Class, .Id, .Href, .Src, .Alt, .Type, .Title, .Role, .OnClick, and the general-purpose escape hatches .Attr(name, value) and .On(eventName, handler).

A decoration must target a single element. Applying one to If, ForEach, Fragment, Raw, or a component result reports diagnostic BCF3008, because those constructs open no element to attach to.

Next#

Read control flow for conditionals and lists, or go back to getting started.