BlazorのQuickGridのスタイル指定には色々な方法があるようだが、とりあえず、MSのマニュアルに載っている方法で試してみた。
以下のようなGridがある場合、
@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid
@using qgridtest.Db
@inject PersonContext Db
<PageTitle>Quick Grid Test</PageTitle>
<h1>Quick Grid Test</h1>
<div class="GridContainer"> <!-- QuickGridのコンテナ -->
<QuickGrid Items="people" Pagination="paginationState">
<PropertyColumn Title="氏名" Property="@(p => p.Name)" Sortable="true" />
<PropertyColumn Title="生年月日" Property="@(p => p.Birthdate)" Format="yyyy/MM/dd" Sortable="true" />
<PropertyColumn Title="年齢" Property="@(p => p.Age)" />
</QuickGrid>
<Paginator State="paginationState" />
</div>
@code {
IQueryable<Person>? people;
PaginationState paginationState = new PaginationState { ItemsPerPage = 5 };
protected override void OnInitialized()
{
people = Db.People.AsQueryable();
}
}まず、QuickGridのコンテナとなるdivタグで括り、そのCSSクラスを使用して、以下のようなCSSを指定することで、QuickGridの各要素にスタイルを適用できる。
/* QuickGridのコンテナ */
.GridContainer {
padding-left:3em;
padding-right: 3em;
}
/* QuickGridのヘッダ */
.GridContainer ::deep th {
background-color: teal;
}
/* QuickGridの行(ボーダー) */
.GridContainer ::deep tr {
border-width: 1px;
border-color:lightgray;
border-style: solid;
}
/* QuickGridの行の偶数行背景色 */
.GridContainer ::deep tr:nth-child(even) {
background-color: lightgreen;
}
/* QuickGridの1列目の幅 */
.GridContainer ::deep td:nth-child(1) {
width: 200px;
}
/* QuickGrid空セルは非表示 */
.GridContainer ::deep td:empty {
display: none;
}↓のような感じで表示される。


ほかの方法もあるようだが、結局 ::deepを使用する方法が一般的みたい。



















Users Today : 18
Users Yesterday : 34
Users Last 7 days : 185
Users Last 30 days : 817
Users This Month : 364
Users This Year : 2826
Total Users : 97341
Views Today : 26
Views Yesterday : 40
Views Last 7 days : 252
Views Last 30 days : 1048
Views This Month : 487
Views This Year : 3409
Total views : 135855
Who's Online : 0