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}";
    }
}
相关推荐
amazinging9 分钟前
北京-4年功能测试2年空窗-报培训班学测开-第五十天
python·学习·面试
巴伦是只猫21 分钟前
【深度学习笔记】2 浅层神经网络
笔记·深度学习·神经网络
没有羊的王K23 分钟前
SSM框架学习DI入门——day2
java·spring boot·学习
公子绝24 分钟前
JAVA学习笔记 使用notepad++开发JAVA-003
java·学习·notepad++·java开发环境
wb18928 分钟前
LVS的集群技术和分布式
运维·笔记·分布式·云计算·lvs
本杰明15233 分钟前
2025/7/14——java学习总结
java·开发语言·学习
2345VOR38 分钟前
【C#地图显示教程:实现鼠标绘制图形操作】
开发语言·c#·计算机外设·地图显示鼠标交互
开开心心_Every44 分钟前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
ysa0510301 小时前
竞赛常用加速技巧#模板
c++·笔记·算法
特种加菲猫2 小时前
硬件与软件的桥梁:冯诺依曼体系、操作系统和初始进程的深度解析
linux·笔记