静安广州网站建设,宝应人网站论坛,网站设计项目建设内容,机场网站建设需求文章目录 前言相关资料css和class绑定直接绑定间接绑定 前言
之前我们说到#xff0c;我们组件化有三个目的。
不用写CSS不用写html不用写交互逻辑
为了解决第一个目的#xff0c;我们需要动态css
相关资料
Blazor入手教程#xff08;二#xff09;css和class绑定
cs… 文章目录 前言相关资料css和class绑定直接绑定间接绑定 前言
之前我们说到我们组件化有三个目的。
不用写CSS不用写html不用写交互逻辑
为了解决第一个目的我们需要动态css
相关资料
Blazor入手教程二css和class绑定
css和class绑定
直接绑定
直接绑定适合参数比较少的时候。建议使用string因为C#会严格检验参数类型string可以避免编译问题
div classClass style grid-column-start: span SpanChildContent
/divcode {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public string Span { get; set; } 12;[Parameter]public string Class{ get; set; } Box;}
间接绑定
Blazor可以直接绑定函数返回值如果是复杂参数可以直接使用函数的返回值作为参数。我印象中Vue好像是不能直接绑定函数返回值的。 div classGetClass() styleToString() /divcode {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};}
}
