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}";
    }
}
相关推荐
电子云与长程纠缠3 分钟前
Blender入门学习02
学习·blender
再睡一夏就好18 分钟前
【C++闯关笔记】STL:deque与priority_queue的学习和使用
java·数据结构·c++·笔记·学习·
蚍蜉撼树谈何易35 分钟前
3.cuda执行模型
学习
金水谣35 分钟前
10.21
笔记
敲代码的嘎仔1 小时前
JavaWeb零基础学习Day4——Maven
java·开发语言·学习·算法·maven·javaweb·学习方法
遇印记1 小时前
网络运维学习笔记
数据结构·笔记·学习
梁辰兴1 小时前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
四谎真好看1 小时前
Java 黑马程序员学习笔记(进阶篇20)
java·笔记·学习·学习笔记
D.....l1 小时前
STM32学习(MCU控制)(GPIO)
stm32·嵌入式硬件·学习
_dindong2 小时前
牛客101:链表
数据结构·c++·笔记·学习·算法·链表