Grid の表示密度

IgxGrid デザインはマテリアル デザイン ガイドラインに基づきます。表示密度オプションの定義済みセットから選択するオプションを提供します。正しい密度を選択すると、コンテンツの大量との相互作用でユーザー エクスペリエンスを向上できます。

デモ


使用方法

上記デモで示されるように、IgxGrid は 3 つの密度オプション (compactcosycomfortable) を提供します。以下のコード スニペットは、displayDensity を設定する方法を示します。

<igx-grid #grid [data]="data" [displayDensity]="'cosy'" >
</igx-grid>

または

...
this.grid.displayDensity = "cosy";
...

各オプションを Grid に反映する方法を紹介します。表示密度オプション間で切り替える際に各 Grid 要素の高さとそのパディングが変更されます。カスタムの列 width を適用する場合、左右のパディングより大きくする必要があることに注意してください。

  • comfortable - これはデフォルトのグリッド表示密度です。密度が最も低く、行の高さが 50px です。左と右のパディングが 24px; 最小列 width48px です。
  • cosy - 中密度で、行の高さは 40px です。左と右のパディングが 16px で最小列width32px です。
  • compact - これは最高密度で行の高さは 32px です。左と右のパディングが 12px で最小列width24px です。
Note

現在サイズはオーバーライドできません

引き続きサンプルを使用して displayDensity の適用方法について説明します。最初に各密度を切り替えるボタンを追加します。

<div class="density-chooser">
    <igx-buttongroup [values]="displayDensities"></igx-buttongroup>
</div>
@ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public density = "compact";
public displayDensities;

public ngOnInit() {
    this.displayDensities = [
        {
            label: "compact",
            selected: this.density === "compact",
            togglable: true
        },
        {
            label: "cosy",
            selected: this.density === "cosy",
            togglable: true
        },
        {
            label: "comfortable",
            selected: this.density === "comfortable",
            togglable: true
        }
    ];
}

マークアップを追加します。

<div class="density-chooser">
    <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
</div>
<igx-grid #grid [data]="data" [displayDensity]="density" width="100%" height="550px" [allowFiltering]="true">
    <igx-column-group  header="Customer Information">
    <igx-column field="CustomerName" header="Customer Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column-group  header="Customer Address">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
        <igx-column field="Address" header="Address" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="PostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
    </igx-column-group>
    </igx-column-group>
    <igx-column field="Salesperson" header="Sales Person" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ShipperName" header="Shipper Name"  [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date"  [dataType]="'date'" [sortable]="true" [hasSummary]="true">
        <ng-template igxCell let-cell="cell" let-val>
            {{val | date:'dd/MM/yyyy'}}
        </ng-template>
    </igx-column>
    <igx-column-group  header="Product Details">
        <igx-column field="ProductID" header="ID" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="ProductName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Quantity" header="Quantity" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
    </igx-column-group>
    <igx-column-group  header="Shipping Information">
        <igx-column field="ShipName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
        <igx-column-group  header="Shipping Address">
            <igx-column field="ShipCountry" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipCity" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipPostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

最後に密度を適用するためのロジックを実装します。

@ViewChild("grid", { read: IgxGridComponent })
public grid: IgxGridComponent;
.....
public selectDensity(event) {
    this.density = this.displayDensities[event.index].label;
}

IgxGrid のグリッド行の高さを変更するその他のオプションに rowHeight プロパティがあります。このプロパティと displayDensity オプションがグリッドレイアウトにどのように動作に影響するかを以下で確認できます。

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

  • rowHeight を指定した場合displayDensity オプションは行の高さに影響しません
  • displayDensity は、上記の理由により残りすべてのグリッド要素に影響します

サンプル機能を拡張して rowHeight プロパティを Grid に追加します。

<igx-grid #grid [data]="data" [displayDensity]="density" [rowHeight]="'80px'" width="100%" 
height="550px" [allowFiltering]="true">
..............
</igx-grid>

API リファレンス

その他のリソース

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