Quick Start

Only 2 steps to create automation component

Installation

Install from nuget

Install-Package ComponentBuilder

Add service in Program.cs

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

Start

1. Inherits BlazorComponentBase instead of ComponentBase

2. For .razor file component must add @attributes="AdditionalAttributes" attribute for automation features with specified HTML element

3. Define CssClassAttribute for component or parameters

Example for .razor file

• Create Element.razor file

@inherits BlazorComponentBase

<span @attributes="AdditionalAttributes"> <!--@attributes is necessary-->
	@ChildContent
</span>

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

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

• Execution in razor

<Element>Hello</Element>
<span>Hello</span>

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

In Element.cs class

• Create Element class

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

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

• Execution in razor

<Element>Hello</Element>
<span>Hello</span>

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

As you can see, using component classes can fully automate components, but the downside is that it requires a certain amount of concrete thinking, especially when dealing with complex components. Of course you can mix the two, but as long as it increases efficiency, it's a good idea.