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 です。

引き続きサンプルを使用して、--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>

IgbGrid の行の高さを変更するその他のオプションに RowHeight プロパティがあります。このプロパティと --ig-size プションが IgbGrid レイアウトにどのように動作に影響するかを以下で確認できます。

// 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);

以下を確認してください。

• 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 リファレンス

その他のリソース

• 仮想化とパフォーマンス
• 編集
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択
• 検索

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)