RenderTreeBuilder Extensions

The extensions of RenderTreeBuilder

The exntensions allows you create element or component easily

CreateElement

Create normal element

builder.CreateElement(0, "div", "content", new { @class="sub-title" });

<div class="sub-title">content</div>

CreateComponent

builder.CreateComponent<Component>(0, attributes: new { Active = true, style = "display:flex" });

CreateStyleRegion

builder.CreateStyleRegion(selector => {
    selector.AddStyle(".head", new {
        font_size = "16px",
        color = "#ff0000",
        font_weight = "bolder"
    })
    .AddStyle(".bigger", new { animation = "tran 3s" });
    .AddKeyFrames("tran", frame => 
    {
        frame.Add("from", new { width = "0px" })
            .Add("to", new { width = "100px" });
    });    
})

Output

.head {
    font-size : "16px";
    color : "#ff0000";
    font-weight : "bolder";
}
.bigger {
    animation : tran 3s;
}
@keyframes tran {
    from {
        width : "0px"
    },
    to {
        width : "100px"
    }
}

BlazorRenderTree

This is a new class to represent RenderTree instance.

builder.Open("div").Class("sub-title").Content("content").Close();

<div class="sub-title">content</div>

Inner Content

using(var div = builder.Open("div").Class("sub-title"))
{
    div.Content(inner =>
    {
        inner.Open<NavLink>().Content("Link").Close();
    });
}

Use Open to start element or component, and use Close to be end of element or component

Use using key word to auto close.