BlazoradeComponentBase

BlazoradeComponentBase Base Class

A base class for creating components for Blazor applications, both server and client (WASM) applications.

Parameters

Name	Type	Description
Attributes	IDictionary<string, object>	An attributes dictionary, which is configured to contain all parameters that are not matched by parameters defined on derived component classes. See sample below to see how you use this parameter.
Builder	IComponentBuilder
ChildContent	RenderFragment	Enables your components to contain content like HTML markup or other components.

Properties

Name	Type	Description
Classes	IReadOnlyCollection<string>	A read-only collection of all classes that have been defined on the component. Use the AddClass and RemoveClass methods to work with classes.
Styles	IReadOnlyDictionary<string, string>	A read-only dictionary that you can use to add inline CSS styles to the component. Use the AddStyle and RemoveStyle methods to work with inline styles.

Methods

The class exposes the following methods.

protected BlazoradeComponentBase AddAttribute(string name, object value)

Adds an attribute to the element. If an attribute with the given name already exists, it will be overwritten.

protected BlazoradeComponentBase AddClasses(params string[] classNames)

Adds one or more CSS classes to the element. All classes added to the element will be rendered in the class attribute.

protected BlazoradeComponentBase AddStyle(string styleName, string value)

Adds an inline CSS style on the element. The added styles will be rendered in the style attribute.

protected BlazoradeComponentBase RemoveAttribute(string name)

Removes the attribute with the given name if it exists.

protected BlazoradeComponentBase RemoveClass(string className)

Removes the class specified in className from the classes collection if it exists.

protected BlazoradeComponentBase RemoveStyle(string styleName)

Removes the style specified by styleName if it exists.

Examples

Attributes

Shows how you use the Attributes parameter in your derived class. You can also conditionally populate the attributes dictionary to render attributes on the produced HTML element.

@inherits BlazoradeComponentBase

<div @attributes="this.Attributes">
    ...
</div>

@code {
    protected override void OnParametersSet()
    {
        this
            .AddAttribute("x-attrib-1", "val-1")
            .AddAttribute("x-attrib-2", "val-2");

        base.OnParametersSet();
    }
}

Adding CSS classes

The sample below shows you how you can add CSS classes in your derived component.

@inherits BlazoradeComponentBase

<div @attributes="this.Attributes">
    ...
</div>

@code {
    protected override void OnParametersSet()
    {
        this.AddClasses("class-1", "class-2", "class-3");

        base.OnParametersSet();
    }
}

Adding inline CSS styles

This sample shows how you can add inline CSS styles to your component.

@inherits BlazoradeComponentBase

<div @attributes="this.Attributes">
    ...
</div>

@code {
    protected override void OnParametersSet()
    {
        this
            .AddStyle("background-color", "rgba(255, 255, 255, .5)")
            .AddStyle("padding", "32px")
            .AddStyle("border", "1px solid #ccc");

        base.OnParametersSet();
    }
}

Child content

Shows you how you can support child content in your component.

@inherits BlazoradeComponentBase

<div @attributes="this.Attributes">
    <div class="some-class"></div>
    <div class="content-container">
        @this.ChildContent
    </div>
</div>