Blazor Grid サイズ
Ignite UI for Blazor の Blazor Grid サイズ機能を使用すると、ユーザーは IgbGrid
内のデータの間隔とレイアウトを制御できます。--ig-size
を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つのサイズ オプションから選択できます。
--ig-size-large
--ig-size-medium
--ig-size-small
Blazor Grid サイズの例
使用方法
上記デモで示されるように、IgbGrid
は 3 つのサイズ オプション (small、medium、large) を提供します。以下のコード スニペットは、--ig-size
をインラインまたは CSS クラスの一部として設定する方法を示しています。
.gridSize {
--ig-size: var(--ig-size-medium);
}
<IgbGrid Class="gridSize" Data=northwindEmployees @ref=grid>
</IgbGrid>
各オプションを IgbGrid
に反映する方法を紹介します。サイズ オプション間で切り替える際に各 IgbGrid
要素の高さとそのパディングが変更されます。カスタムの列 Width
を適用する場合、左右のパディングより大きくする必要があることに注意してください。
- large - これはデフォルトの
IgbGrid
サイズです。サイズが最も低く、行の高さが50px
です。左と右のパディングが24px
で最小列Width
は80px
です。 - medium - 中サイズで、行の高さは
40px
です。左と右のパディングが16px
で最小列Width
は64px
です。 - small - 強度が最も高く、行の高さは
32px
です。左と右のパディングが12px
で最小列Width
は56px
です。
[!Note] 現在サイズはオーバーライドできません。
引き続きサンプルを使用して、--ig-size
の適用方法について説明します。最初に各サイズを切り替えるボタンを追加します。
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="PropertyEditor"
@ref="propertyEditor">
<IgbPropertyEditorPropertyDescription
Name="SizeEditor"
@ref="sizeEditor"
Label="Grid Size:"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
ChangedScript="WebGridSetGridSize">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
マークアップを追加します。
<div class="container vertical">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Data="InvoicesData"
AllowFiltering="true"
Id="grid"
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 {
*** In JavaScript ***
igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => {
var newVal = evtArgs.newValue.toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);
}
IgbGrid
の行の高さを変更するその他のオプションに RowHeight
プロパティがあります。このプロパティと --ig-size
プションが IgbGrid
レイアウトにどのように動作に影響するかを以下で確認できます。
以下を確認してください。
RowHeight
を指定した場合、--ig-size
CSS 変数は行の高さに影響しません。--ig-size
は、上記の理由により残りすべての Grid 要素に影響します。
サンプル機能を拡張して RowHeight
プロパティを IgbGrid
に追加します。
<IgbGrid
@ref="grid"
Id="grid"
Class="gridSize"
Width="100%"
Height="100%"
AutoGenerate="true"
Data="northwindEmployees"
RowHeight="rowHeight">
</IgbGrid>
@code {
private string rowHeight = "80px";
}
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。