---
description: The extensions of RenderTreeBuilder
---

# RenderTreeBuilder 的扩展

### CreateElement

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

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

### CreateComponent

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

### CreateStyleRegion

```csharp
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" });
    });    
})
```

{% code title="Output" %}
```css
.head {
    font-size : "16px";
    color : "#ff0000";
    font-weight : "bolder";
}
.bigger {
    animation : tran 3s;
}
@keyframes tran {
    from {
        width : "0px"
    },
    to {
        width : "100px"
    }
}
```
{% endcode %}

### BlazorRenderTree

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

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

#### 子内容

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

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

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