Blazor Grid 表示密度
Blazor Grid の Ignite UI for Blazor 表示密度を使用すると、ユーザーは IgbGrid
内のデータの間隔とレイアウトを制御できます。密度を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つの表示密度オプションから選択できます。
- Cozy
- Comfortable
- Compact
Blazor Grid 表示密度の例
使用方法
上記デモで示されるように、IgbGrid
は 3 つの密度オプション (compact、cosy、comfortable) を提供します。以下のコード スニペットは、DisplayDensity
を設定する方法を示します。
<IgbGrid DisplayDensity="DisplayDensity.Cosy" Data=northwindEmployees @ref=grid>
</IgbGrid>
または
@code {
this.grid.DisplayDensity = DisplayDensity.Cosy;
}
各オプションを IgbGrid
に反映する方法を紹介します。表示密度オプション間で切り替える際に各 IgbGrid
要素の高さとそのパディングが変更されます。カスタムの列 Width
を適用する場合、左右のパディングより大きくする必要があることに注意してください。
- comfortable - これはデフォルトの
IgbGrid
表示密度です。密度が最も低く、行の高さが50px
です。左と右のパディングが24px
で最小列Width
は80px
です。 - cosy - 中密度で、行の高さは
40px
です。左と右のパディングが16px
で最小列Width
は64px
です。 - compact - これは最高密度で行の高さは
32px
です。左と右のパディングが12px
で最小列Width
は56px
です。
[!Note] 現在サイズはオーバーライドできません。
引き続きサンプルを使用して DisplayDensity
の適用方法について説明します。最初に各密度を切り替えるボタンを追加します。
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="PropertyEditor"
@ref="propertyEditor">
<IgbPropertyEditorPropertyDescription
PropertyPath="DisplayDensity"
Name="DisplayDensityEditor"
@ref="displayDensityEditor">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
マークアップを追加します。
<div class="container vertical">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Data="InvoicesData"
AllowFiltering="true"
Name="grid"
@ref="grid">
<IgbColumn
Field="CustomerName"
Header="Customer Name"
Sortable="true"
HasSummary="true"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Country"
Header="Country"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="City"
Header="City"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="Address"
Header="Address"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="Salesperson"
Header="Sales Person"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ShipperName"
Header="Shipper Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ProductID"
Header="ID"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ProductName"
Header="Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Filterable="false">
</IgbColumn>
<IgbColumn
Field="Quantity"
Header="Quantity"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Filterable="false">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
DataType="GridColumnDataType.Boolean"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
DataType="GridColumnDataType.Boolean"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ShipName"
Header="Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ShipCountry"
Header="Country"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ShipCity"
Header="City"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="ShipPostalCode"
Header="Postal Code"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true">
</IgbColumn>
</IgbGrid>
</div>
</div>
最後に密度を適用するためのロジックを実装します。
@code {
private Action BindElements { get; set; }
protected override void OnAfterRender(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var displayDensityEditor = this.displayDensityEditor;
var grid = this.grid;
propertyEditor.Target = this.grid;
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription displayDensityEditor;
private IgbGrid grid;
}
IgbGrid
の行の高さを変更するその他のオプションに RowHeight
プロパティがあります。このプロパティと DisplayDensity
プションが IgbGrid
レイアウトにどのように動作に影響するかを以下で確認できます。
以下を確認してください。
RowHeight
を指定した場合、DisplayDensity
オプションは行の高さに影響しません。DisplayDensity
は、上記の理由により残りすべての Grid 要素に影響します。
サンプル機能を拡張して RowHeight
プロパティを IgbGrid
に追加します。
<IgbGrid Width="100%" Height="100%"
@ref="grid"
AutoGenerate="true"
Data="northwindEmployees"
RowHeight="rowHeight"
DisplayDensity="@density">
</IgbGrid>
@code {
private string rowHeight = "80px";
}
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。