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

その他のリソース

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