React Grid サイズ
Ignite UI for React の React Grid サイズ機能を使用すると、ユーザーは IgrGrid
内のデータの間隔とレイアウトを制御できます。--ig-size
を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つのサイズ オプションから選択できます。
--ig-size-large
--ig-size-medium
--ig-size-small
React Grid サイズの例
使用方法
上記デモで示されるように、IgrGrid
は 3 つのサイズ オプション (small、medium、large) を提供します。以下のコード スニペットは、--ig-size
をインラインまたは CSS クラスの一部として設定する方法を示しています。
.gridSize {
--ig-size: var(--ig-size-medium);
}
<IgrGrid id="grid" className="gridSize">
</IgrGrid>
各オプションを IgrGrid
に反映する方法を紹介します。サイズ オプション間で切り替える際に各 IgrGrid
要素の高さとそのパディングが変更されます。カスタムの列 width
を適用する場合、左右のパディングより大きくする必要があることに注意してください。
- large - これはデフォルトの
IgrGrid
サイズです。サイズが最も低く、行の高さが50px
です。左と右のパディングが24px
で最小列width
は80px
です。 - medium - 中サイズで、行の高さは
40px
です。左と右のパディングが16px
で最小列width
は64px
です。 - small - 強度が最も高く、行の高さは
32px
です。左と右のパディングが12px
で最小列width
は56px
です。
[!Note] 現在サイズはオーバーライドできません。
引き続きサンプルを使用して、--ig-size
の適用方法について説明します。最初に各サイズを切り替えるボタンを追加します。
<IgrPropertyEditorPanel
ref={propertyEditorRef}
componentRenderer={renderer}
target={grid}
descriptionType="WebGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
name="SizeEditor"
label="Grid Size:"
valueType="EnumValue"
dropDownNames={["Small", "Medium", "Large"]}
dropDownValues={["Small", "Medium", "Large"]}
changed={this.webGridSetGridSize}>
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
マークアップを追加します。
<IgrGrid id="grid" autoGenerate="false" ref={gridRef} data={invoicesData} allowFiltering="true">
<IgrColumn field="CustomerName" header="Customer Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Country" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="City" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Address" header="Address" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="PostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Salesperson" header="Sales Person" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipperName" header="Shipper Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="Date" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductID" header="ID" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Quantity" header="Quantity" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCountry" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCity" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipPostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
</IgrGrid>
最後にサイズを適用するためのロジックを実装します。
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.bind(this);
this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
this.gridRef = this.gridRef.bind(this);
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
IgrGrid
の行の高さを変更するその他のオプションに rowHeight
プロパティがあります。このプロパティと --ig-size
プションが IgrGrid
レイアウトにどのように動作に影響するかを以下で確認できます。
以下を確認してください。
rowHeight
を指定した場合、--ig-size
CSS 変数は行の高さに影響しません。--ig-size
は、上記の理由により残りすべての Grid 要素に影響します。
サンプル機能を拡張して rowHeight
プロパティを IgrGrid
に追加します。
<IgrGrid id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true">
</IgrGrid>
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。