CssClass Attribute

Define CssClassAttribute for component class or parameter

For Component

The class string always applied when component is initialized.

Alert.razor

@inherits BlazorComponentBase
@attribute [CssClass("alert")]

<div @attributes="AdditionalAttributes">
    @ChildContent
</div>

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

[CssClass("alert")]
public class Alert : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
}

Index.razor

@page "/"
<Alert>Alert</Alert>

<div class="alert">Alert</div>

For Parameter

The CSS value can apply when parameter has value

• For bool type

Only true value to apply the css string

Alert.razor

@inherits BlazorComponentBase
@attribute [CssClass("alert")]

<div @attributes="AdditionalAttributes">
    @ChildContent
</div>

@code{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][CssClass("active")]public bool Active { get; set; }
}

[CssClass("alert")]
public class Alert : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][CssClass("active")]public bool Active { get; set; }
}

Index.razor

@page "/"

<Alert Active>Alert</Alert>

<div class="alert active">Alert</div>

• For Enum type

The value of parameter could be appended behind the css string with enum member

enum Color
{
    Primary,
    Secondary,
    [CssClass("info")]Information
}

[Parameter][CssClass("alert-")]public Color? Color { get; set; }

<Component Color="Color.Primary"/>
<div class="alert-primary"></div>

<Component Color="Color.Information"/>
<div class="alert-info"></div>

• For other value types

The parameter value is appended to the css value

[Parameter][CssClass("margin-")]public int? Margin { get; set; }

<Component Margin="5"/>

<div class="margin-5"></div>

NOTE: The value should be Nullable because default value of int type is 0

Even though you didn't assign a value to the parameter, you still have a default value

[Parameter][CssClass("margin-")]public int Margin { get; set; }

<Component />

<div class="margin-0"></div>

Pre-Definition

Define CssClassAttribute in interface to reuse in component

[CssClass("ui")]
public interface IHasUI { }

public interface IHasDisabled
{
    [CssClass("disabled")]bool Disabled { get; set; }
}

[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter]public bool Disabled { get; set; }
}

<Button Disabled/>

<div class="ui btn disabled"></div>

• Override pre-definition

[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter][CssClass("btn-disabled")]public bool Disabled { get; set; }
}

<Button Disabled/>

<div class="ui btn btn-disabled"></div>

Order

Set Order property in CssClassAttribute to sort css string

[Parameter][CssClass("active", Order = 10)]public bool Active { get; set; }
[Parameter][CssClass("disabled")]public bool Disbaled { get; set; }
[Parameter][CssClass("m-", Order = 5)]public int? Margin { get; set; }

<Component Acitve Disabled Margin="2"/>

<div class="disabled m-2 active"/></div>

Disabled

Set Disabled=true to disable css string apply when parameter set

public interface IHasDisabled
{
    [CssClass("disabled")]bool Disabled { get; set; }
}

[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter][CssClass(Disabled = true)]public bool Disabled { get; set; }
}

<Button Disabled />

<div class="btn ui"></div>

Concat

Set Concat=true to concat CssClassAttribute value from derived class

[CssClass("button")]
[HtmlTag("button")]
public abstract class ButtonBase : BlazorComponentBase
{
    //...
}

[CssClass("btn", Concat = true)]
public class BootstrapButton : ButtonBase
{
}

<BootstrapButton />

<button class="btn button"></button>