Web Components 그리드 크기
The Ignite UI for Web Components Size feature in Web Components Grid allows users to control the spacing and layout of data within the IgcGridComponent. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:
--ig-size-large--ig-size-medium--ig-size-small
Web Components Grid Size Example
Usage
위 데모에서 보시다시피, 이 시스템은IgcGridComponent 스몰, 미디 엄, 라지 세 가지 사이즈 옵션을 제공합니다. 아래 코드 스니펫은 CSS 클래스의 인라인 또는 일부를 설정--ig-size 하는 방법을 보여줍니다:
.gridSize {
--ig-size: var(--ig-size-medium);
}
<igc-grid id="grid" class="gridSize">
</igc-grid>
이제 각 옵션이 컴포넌트에IgcGridComponent 어떻게 반영되는지 자세히 살펴보겠습니다. 서로 다른 크기 옵션을 전환할 때 각IgcGridComponent 요소의 높이와 해당 패딩이 바뀝니다. 또한 커스텀 컬럼width을 적용하려면 좌우 패딩 합보다 커야 한다는 점을 고려해 주세요:
- 큰- 기본
IgcGridComponent크기로, 가장 낮은 강도와 행 높이가 같습니다.50px왼쪽과 오른쪽 패딩은 다음과 같습니다24px; 최소 열width은 다음과 같습니다80px; - 중간 크기 - 중간 강도 크기로,
40px줄 높이가 있습니다. 왼쪽과 오른쪽 패딩은 다음과 같습니다16px; 최소 열width은 다음과 같습니다64px; - 작은 크기는 강도와
32px행 높이가 가장 높은 크기입니다. 왼쪽과 오른쪽 패딩은 다음과 같습니다12px; 최소 열width은 다음과 같습니다56px;
[!Note] Please keep in mind that currently you can not override any of the sizes.
이제 샘플을 계속 진행하며 이 값이--ig-size 어떻게 적용되는지 살펴보겠습니다. 먼저 각 사이즈를 전환할 수 있도록 도와주는 버튼을 추가해 보겠습니다:
<div class="size-chooser">
<igc-property-editor-panel
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true"
name="PropertyEditor"
id="propertyEditor">
<igc-property-editor-property-description
name="SizeEditor"
id="SizeEditor"
label="Grid Size:"
value-type="EnumValue"
drop-down-names="Small, Medium, Large"
drop-down-values="Small, Medium, Large">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
이제 마크업을 추가할 수 있습니다.
<igc-grid id="grid" width="100%" height="550px" allow-filtering="true">
<igc-column-group header="Customer Information">
<igc-column field="CustomerName" header="Customer Name" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column-group header="Customer Address">
<igc-column field="Country" header="Country" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column field="City" header="City" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column field="Address" header="Address" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column field="PostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column field="Salesperson" header="Sales Person" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column field="ShipperName" header="Shipper Name" data-type="String" sortable="true" has-summary="true">
</igc-column>
<igc-column field="OrderDate" header="Order Date" data-type="Date" sortable="true" has-summary="true">
</igc-column>
<igc-column-group header="Product Details">
<igc-column field="ProductID" header="ID" data-type="String" sortable="true" has-summary="true" filterable="false">
</igc-column>
<igc-column field="ProductName" header="Name" data-type="String" sortable="true" has-summary="true" filterable="false">
</igc-column>
<igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="true" has-summary="true" filterable="false">
</igc-column>
<igc-column field="Quantity" header="Quantity" data-type="Number" sortable="true" has-summary="true" filterable="false">
</igc-column>
<igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true" has-summary="true" >
</igc-column>
</igc-column-group>
<igc-column-group header="Shipping Information">
<igc-column field="ShipName" header="Name" data-type="String" sortable="true" has-summary="true" >
</igc-column>
<igc-column-group header="Shipping Address">
<igc-column field="ShipCountry" header="Country" data-type="String" sortable="true" has-summary="true" >
</igc-column>
<igc-column field="ShipCity" header="City" data-type="String" sortable="true" has-summary="true" >
</igc-column>
<igc-column field="ShipPostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true" >
</igc-column>
</igc-column-group>
</igx-column-group>
</igx-grid>
마지막으로 실제로 크기를 적용하는 데 필요한 논리를 제공하겠습니다.
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var grid = this.grid = document.getElementById('grid') as IgcGrid;
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.grid;
this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
sizeEditor.changed = this.webGridSetGridSize;
grid.data = this.data;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
행의 높이IgcGridComponent를 변경할 수 있는 또 다른 옵션은IgcGridComponent 속성rowHeight 입니다. 이제 이 속성이 레이아웃에IgcGridComponent 어떤 영향을 미치는지 실제로 살펴보겠습니다.--ig-size
다음 사항에 유의하시기 바랍니다.
--ig-sizeCSS 변수가 지정되어rowHeight 있으면 행 높이에 영향을 미치지 않습니다.--ig-size위에서 설명한 대로 그리드 내 모든 나머지 요소에 영향을 미칠 것입니다.
이제 샘플을 확장하여 다음rowHeight 속성에 추가할IgcGridComponent 수 있습니다:
<igc-grid id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true">
</igc-grid>
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.