C# Blazor 学习笔记(9):动态css/class绑定

前言

之前我们说到，我们组件化有三个目的。

• 不用写CSS
• 不用写html
• 不用写交互逻辑

为了解决第一个目的，我们需要动态css

相关资料

Blazor入手教程（二）css和class绑定

css和class绑定

直接绑定

直接绑定适合参数比较少的时候。建议使用string，因为C#会严格检验参数类型，string可以避免编译问题

<div class="@Class" style=" grid-column-start: span @Span">
    @ChildContent
div>

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

    [Parameter]
    public string Span { get; set; } = "12";
    
	[Parameter]
    public string Class{ get; set; } = "Box";

}

间接绑定

Blazor可以直接绑定函数返回值，如果是复杂参数，可以直接使用函数的返回值作为参数。我印象中Vue好像是不能直接绑定函数返回值的。

<div class="@GetClass()" style="@ToString()" >

</div>

@code {

    private string GetClass()
    {
        return isBorder ? "B_Col" : "";
    }

    [Parameter]
    public bool isBorder { get; set; } = false;
    
	public int height { get; set; } = 100;
    public int width { get; set; } = 100;
    public string color { get; set; } = "#ccc";
    public string ToString()
    {
		//直接使用字符串连接
        return $"width:{width}px;height:{height}px;background-color:{color}";
    }
}