CssClassAttribute 特性

为组件类或参数定义 CssClassAttribute 特性

组件

css class 字符串总是在组件初始化时应用。

Alert.razor

@inherits BlazorComponentBase

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

@code{
    [CssClass("alert")]
    public Alert()
    {
    }
    
    [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>

参数

当参数有值时，才可以应用 CSS 值

• bool 类型

只有为 true 时才应用 CSS

Alert.razor

@inherits BlazorComponentBase

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

@code{
    [CssClass("alert")]
    public Alert()
    {
    }
    
    [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>

• Enum 类型

参数的值会被添加到带有枚举成员的css字符串后面

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>

• 其他值类型

参数的值会追加到 css 值得后面

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

<Component Margin="5"/>

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

注意：该值应该为 Nullable，因为 int 类型的默认值为0

尽管你没有为参数赋值，但是依然会有默认值

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

<Component />

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

预定义

为接口进行预定义并进行复用

[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>

• 覆盖预定义

[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 可以为生成的 CSS 排序

[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>

禁用

设置 Disbaled=true 可以禁用 CSS 的附加操作

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=true 可以连接父类定义的 CssClassAttribute 的值

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

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

<BootstrapButton />

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