> For the complete documentation index, see [llms.txt](https://playermaker.gitbook.io/componentbuilder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://playermaker.gitbook.io/componentbuilder/chinese/kuai-su-kai-shi.md).

# 快速开始

### 安装

{% code title="从 nuget 安装包" %}

```powershell
Install-Package ComponentBuilder
```

{% endcode %}

{% code title="在 Program.cs 添加服务" %}

```csharp
using ComponentBuilder;
//...
builder.Services.AddComponentBuilder();
//...
```

{% endcode %}

### 开始

1. 继承 `BlazorComponentBase` 而不是 `ComponentBase`
2. **对于 .razor 文件组件**必须为具有指定 HTML 元素的自动化功能添加`@attributes="Additional Attributes"`属性
3. 为组件或参数定义 `CssClassAttribute` 特性

### `.razor` 文件的例子

* 创建 `Element.razor` 文件

```cshtml
@inherits BlazorComponentBase

<span @attributes="AdditionalAttributes"> <!--@attributes 是必须的-->
	@ChildContent
</span>

@code{
	[Parameter] public RenderFragment? ChildContent { get; set; }

	[Parameter][CssClass("active")] public bool Active { get; set; }
}
```

* 在 razor 中执行

```html
<Element>Hello</Element>
<span>Hello</span>

<Element Active>Active Hello</Element>
<span class="active">Active Hello</span>
```

### 使用 `Element.cs` 类

* 创建 `Element` 类

```csharp
[HtmlTag("span")]
public class Element : BlazorComponentBase, IHasChildContent
{
	[Parameter] public RenderFragment? ChildContent { get; set; }

	[Parameter][CssClass("active")] public bool Active { get; set; }
}
```

* 在 razor 中执行

```html
<Element>Hello</Element>
<span>Hello</span>

<Element Active>Active Hello</Element>
<span class="active">Active Hello</span>
```

> 如您所见，使用组件类可以完全自动化组件，但缺点是它需要一定的具体思维，尤其是在处理复杂组件时。当然，您可以将两者混合使用，但只要能提高效率，就是个好主意。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://playermaker.gitbook.io/componentbuilder/chinese/kuai-su-kai-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.