[英]How to set to row Background color for the ant design blazor table
I'm using my project for ant design blazor table , anyone know how to adding background color for ant design blazor table row,我将我的项目用于ant 设计 blazor 表,任何人都知道如何为 ant 设计 Z5407594DC4137BDC74 行添加背景颜色
code here代码在这里
@using System.ComponentModel
@using AntDesign.TableModels
<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick">
<Column @bind-Field="@context.Name">
<a>@context.Name</a>
</Column>
<Column @bind-Field="@context.Age"></Column>
<Column @bind-Field="@context.Address">
<TitleTemplate>
<span> <Icon Type="environment" /> Address </span>
</TitleTemplate>
</Column>
<Column @bind-Field="@context.Tags">
@foreach (var tag in context.Tags)
{
var color = tag.Length > 5 ? "geekblue" : "green";
if (tag == "loser")
{
color = "volcano";
}
<Tag Color="@color">@tag</Tag>
}
</Column>
<ActionColumn Title="Action">
<Space Size=@("middle")>
<SpaceItem>
<a>Invite @context.Name</a>
</SpaceItem>
<SpaceItem>
<a>Delete</a>
</SpaceItem>
</Space>
</ActionColumn>
</Table>
@code{
Data[] data = new Data[]
{
new()
{
Key = "1",
Name = "John Brown",
Age = 32,
Address = "New York No. 1 Lake Park",
Tags = new[] {"nice", "developer"}
},
new()
{
Key = "2",
Name = "Jim Green",
Age = 42,
Address = "London No. 1 Lake Park",
Tags = new[] { "loser"}
},
new()
{
Key = "3",
Name = "Joe Black",
Age = 32,
Address = "Sidney No. 1 Lake Park",
Tags = new[] { "cool", "teacher" }
}
};
public class Data
{
[DisplayName("Key")]
public string Key { get; set; }
[DisplayName("Name")]
public string Name { get; set; }
[DisplayName("Age")]
public int Age { get; set; }
[DisplayName("Address")]
public string Address { get; set; }
[DisplayName("Tags")]
public string[] Tags { get; set; }
}
void OnRowClick(RowData<Data> row)
{
Console.WriteLine($"row {row.Data.Key} was clicked.");
}
}
The simplest way which I can think of is adding a RowClassName
prop in the Antd blazor Table component and then add the styles for each row of the table.我能想到的最简单的方法是在 Antd blazor Table 组件中添加一个
RowClassName
prop,然后为表的每一行添加 styles。
You can add a className in rows of table in two ways.您可以通过两种方式在表的行中添加类名。
<Table RowClassName="@(_=>"classname-for-name"> </Table>
<style>
.classname-for-name{
background-color: blue;
}
</style>
// ------------------------------------------------------------------
<Table RowClassName="@(row => row.Data.RowClass"> </Table>
@code {
public class Data
{
[DisplayName("Score")]
public int Score { get; set; }
public string RowClass => Score < 70 ? "danger" : "success";
}
}
<style>
.danger {
background-color: red;
}
.success {
background-color: green:
}
<style>
//-------------------------------------------------
Remember above showcases/examples is contrived.请记住上面的展示/示例是人为的。
Following is the complete example to add background colors for each row in the Antd blazor Table.以下是为 Antd blazor 表中的每一行添加背景 colors 的完整示例。
@using System.ComponentModel
@using AntDesign.TableModels
<Table TItem="Data" DataSource="@data" RowClassName="@(_=>"row-background")">
<Column @bind-Field="@context.Name">
<a>@context.Name</a>
</Column>
<Column @bind-Field="@context.Score"></Column>
</Table>
<style>
.row-background{
background-color: #fff1f0;
}
</style>
@code{
Data[] data = new Data[]
{
new()
{
Key = "1",
Name = "John Brown",
Score = 95,
},
new()
{
Key = "2",
Name = "Jim Green",
Score = 87,
}
};
public class Data
{
[DisplayName("Key")]
public string Key { get; set; }
[DisplayName("Name")]
public string Name { get; set; }
[DisplayName("Score")]
public int Score { get; set; }
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.