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

文章目录

前言

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

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

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

相关资料

Blazor入手教程(二)css和class绑定

css和class绑定

直接绑定

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

html 复制代码
<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好像是不能直接绑定函数返回值的。

java 复制代码
<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}";
    }
}
相关推荐
唐青枫2 小时前
C#.NET 数据库开发提速秘籍:SqlSugar 实战详解
c#·.net
mudtools18 小时前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
c#·.net
_落纸1 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE1 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha1 天前
SpringBoot
笔记·学习
大飞pkz1 天前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
萘柰奈1 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽1 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫1 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie1 天前
Android音频学习(十八)——混音流程
学习·音视频