Angular Hierarchical Grid のサイズ
IgxHierarchicalGrid デザインはマテリアル デザイン ガイドラインに基づきます。現在、それぞれ small (小)、medium (中)、または large (大) のビューを表示する、事前定義されたサイズ オプションのセットから選択するオプションが提供されています。マテリアル UI テーブル/マテリアル UI グリッドに適切なサイズを選択することで、量の多いコンテンツを操作する際のユーザー エクスペリエンスを飛躍的に向上させることができます。
Angular Hierarchical Grid サイズの例
使用方法
上記デモで示されるように、IgxHierarchicalGrid には 3 つのサイズ オプション (small、medium、large) が用意されています。以下のコード スニペットは、size を設定する方法を示します。
<igx-hierarchical-grid #hierarchicalGrid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-hierarchical-grid>
以下のコード スニペットは、size を設定する方法を示します。各オプションを Hierarchical Grid に反映する方法を紹介します。サイズ間で切り替える際に各 Hierarchical Grid 要素の高さとそのパディングが変更されます。カスタムの列 width を適用する場合、左右のパディングより大きくする必要があることに注意してください。
- --ig-size-large - これはデフォルトの Hierarchical 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-hierarchical-grid #hGrid [data]="localdata" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
<igx-column field="CustomerID"></igx-column>
<igx-column field="CompanyName"></igx-column>
<igx-column field="ContactName"></igx-column>
<igx-column field="ContactTitle"></igx-column>
<igx-column field="Address"></igx-column>
<igx-column field="City"></igx-column>
<igx-column field="PostalCode"></igx-column>
<igx-column field="Country"></igx-column>
<igx-column field="Phone"></igx-column>
<igx-column field="Fax"></igx-column>
<igx-row-island [key]="'Orders'" [autoGenerate]="false" #layout1 >
<igx-column field="OrderID"></igx-column>
<igx-column field="EmployeeID"></igx-column>
<igx-column field="OrderDate"></igx-column>
<igx-column field="RequiredDate"></igx-column>
<igx-column field="ShippedDate"></igx-column>
<igx-column field="ShipVia"></igx-column>
<igx-column field="Freight"></igx-column>
<igx-column field="ShipName"></igx-column>
<igx-column field="ShipAddress"></igx-column>
<igx-column field="ShipCity"></igx-column>
<igx-column field="ShipPostalCode"></igx-column>
<igx-column field="ShipCountry"></igx-column>
<igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
<igx-column field="ProductID"></igx-column>
<igx-column field="UnitPrice"></igx-column>
<igx-column field="Quantity"></igx-column>
<igx-column field="Discount"></igx-column>
</igx-row-island>
</igx-row-island>
</igx-hierarchical-grid>
最後にサイズを適用するためのロジックを実装します。
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent })
public hierarchicalGrid: IgxHierarchicalGridComponent;
public selectSize(event: any) {
this.size = this.sizes[event.index].label;
}
@HostBinding('style.--ig-size')
protected get sizeStyle() {
return `var(--ig-size-${this.size})`;
}
IgxHierarchicalGrid の Hierarchical Grid 行の高さを変更するその他のオプションに rowHeight プロパティがあります。このプロパティと --ig-size CSS 変数 オプションが Hierarchical Grid レイアウトにどのように動作に影響するかを以下で確認できます。
以下を確認してください。
- rowHeight が指定されている場合、
--ig-sizeCSS 変数は行の高さに影響しません。 --ig-sizeは、上記の理由により残りすべてのグリッド要素に影響します。
サンプル機能を拡張して rowHeight プロパティを Hierarchical Grid に追加します。
<igx-hierarchical-grid #hierarchicalGrid [data]="data" [rowHeight]="'80px'" width="100%"
height="550px" [allowFiltering]="true">
..............
</igx-hierarchical-grid>
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub