Css和class綁定
Blazor中的css和class綁定還是比較便利的。方式也和vue 十分類似，感覺唯一區別就是Blazor中拼接時不用像vue那樣用+加號拼接字符串
@page "/cssbinding"
<style scoped>
.active{
width:80px;
height:80px;
}
.active2 {
background-color:#ff6a00;
}
</style>
<h3>綁定單個css屬性</h3>
<div style="font-size:@(fontsize)px">文字大小</div>
<h3 style="margin-top:100px">綁定多個css屬性</h3>
<div style="@style.ToString()"></div>
<h3 style="margin-top:100px">綁定多個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);
}
}