Blazor⼊⼿教程(⼆)css和class绑定
Css和class绑定
Blazor中的css和class绑定还是⽐较便利的。⽅式也和vue ⼗分类似,感觉唯⼀区别就是Blazor中拼接时不⽤像vue那样⽤+加号拼接字符串
@page "/cssbinding"
<style scoped>
.active{
width:80px;
cssclass属性
height:80px;
}
.active2 {
background-color:#ff6a00;
}
</style>
<h3>绑定单个css属性</h3>
<div >⽂字⼤⼩</div>
<h3 >绑定多个css属性</h3>
<div ></div>
<h3 >绑定多个class</h3>
<div class="@getClass()"></div>
@code {
public class Style
{
public int height { get; set; } = 100;
public int width { get; set; } = 100;
public string color { get; set; } = "#ccc";
public override string ToString()
{
return $"width:{width}px;height:{height}px;background-color:{color}";        }
}
public int fontsize =30;
public Style style = new Style();
public string[] classArray = new string[] { "active", "active2" };
public string getClass()
{
return string.Join(" ", classArray);
}
}
⽬录

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。