Angular Tree Grid のサイズ

    IgxTreeGrid デザインはマテリアル デザイン ガイドラインに基づきます。現在、それぞれ small (小)、medium (中)、または large (大) のビューを表示する、事前定義されたサイズ オプションのセットから選択するオプションが提供されています。マテリアル UI テーブル/マテリアル UI グリッドに適切なサイズを選択することで、量の多いコンテンツを操作する際のユーザー エクスペリエンスを飛躍的に向上させることができます。

    Angular Tree Grid サイズの例

    使用方法

    上記デモで示されるように、IgxTreeGrid には 3 つのサイズ オプション (small、medium、large) が用意されています。以下のコード スニペットは、size を設定する方法を示します。

    <igx-tree-grid #treeGrid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-tree-grid>

    以下のコード スニペットは、size を設定する方法を示します。各オプションを Tree Grid に反映する方法を紹介します。サイズ間で切り替える際に各 Tree Grid 要素の高さとそのパディングが変更されます。カスタムの列 width を適用する場合、左右のパディングより大きくする必要があることに注意してください。

    • --ig-size-large - これはデフォルトの Tree Grid サイズです。密度が最も低く、行の高さが 50px です。左右のパディングは 24px です。最小列 width は 80px です。
    • --ig-size-medium - これは行の高さが 40px の中間サイズです。左右のパディングは 16px です。最小列 width は 64px です。
    • --ig-size-small - これは行の高さが 32px の最小サイズです。左右のパディングは 12px です。最小列 width は 56px です。
    Note

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

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

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes"></igx-buttongroup>
</div>

    @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public size = 'small';
public sizes;

public ngOnInit() {
    this.sizes = [
        {
            label: 'small',
            selected: this.size === 'small',
            togglable: true
        },
        {
            label: 'medium',
            selected: this.sie === 'medium',
            togglable: true
        },
        {
            label: 'large',
            selected: this.size === 'large',
            togglable: true
        }
    ];
}

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

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</div>
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="100%"
    height="550px" [allowFiltering]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [hasSummary]="true" width="200px"></igx-column>
    <igx-column-group [pinned]="false" header="General Information">
        <igx-column field="HireDate" 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="Person Details">
            <igx-column field="ID" dataType="number" [filterable]="false"></igx-column>
            <igx-column field="Title" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Age" dataType="number" [sortable]="true" [hasSummary]="true"
                [summaries]="numberSummaries" [filterable]="false"></igx-column>
        </igx-column-group>
    </igx-column-group>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Country" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="City" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Address" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Fax" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="PostalCode" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Country" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="City" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Address" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
            <igx-column field="Fax" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
            <igx-column field="PostalCode" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-tree-grid>

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

    @ViewChild('treeGrid', { read: IgxTreeGridComponent })
public treeGrid: IgxTreeGridComponent;

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

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

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

    • rowHeight が指定されている場合、--ig-size CSS 変数は行の高さに影響しません。
    • --ig-size は、上記の理由により残りすべてのグリッド要素に影響します。

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

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

    API リファレンス

    その他のリソース

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