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}";
    }
}
相关推荐
张永清-老清6 分钟前
每周读书与学习->JMeter主要元件详细介绍(一)配置元件
学习·jmeter·性能调优·jmeter性能测试·性能分析·干货分享
狮智先生21 分钟前
【学习笔记】利用meshlab进行曲面的质量检查
经验分享·笔记·课程设计·几何学
鼾声鼾语41 分钟前
grootN1 grootN1.5 gr00t安装方法以及使用(学习)
学习·angular.js·simulink·isaacsim·isaaclab
MYX_3091 小时前
第七章 完整的模型训练
pytorch·python·深度学习·学习
新子y2 小时前
【小白笔记】岛屿数量
笔记·python
Larry_Yanan2 小时前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
励志成为美貌才华为一体的女子2 小时前
pdf解析工具---Miner-u 本地部署记录
学习·pdf
FserSuN2 小时前
GraphRAG 与 Neo4j 社区版:能力边界与适用场景学习总结
学习·neo4j
学不会就看2 小时前
PyTorch 张量学习
人工智能·pytorch·学习
ʚ希希ɞ ྀ2 小时前
SpringBoot的学习
java·spring boot·学习