RenderTreeBuilder 的扩展

The extensions of RenderTreeBuilder

CreateElement

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

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

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

子内容

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

使用 Open 作为组件或元素的开始标记，然后使用 Close 作为结束标记

可以使用 using 关键字来自动作为结束标记