Web Components 그리드 크기
Web Components Grid의 Ignite UI for Web Components 크기 기능을 사용하면 사용자가 데이터 내의 간격과 레이아웃을 제어할 수 있습니다 IgcGridComponent. 변경--ig-size 하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 환경을 크게 개선할 수 있습니다. 세 가지 크기 옵션 중에서 선택할 수 있습니다.
--ig-size-large--ig-size-medium--ig-size-small
Web Components Grid Size Example
Usage
위의 데모에서 볼 수 있듯이 IgcGridComponent 세 가지 크기 옵션을 제공합니다. 작다, 보통 그리고 큰. 아래 코드 스니펫은 설정 방법을 보여줍니다.--ig-size 인라인 또는 CSS 클래스의 일부 :
.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. - small- 강렬하고
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위에서 설명한 것처럼 Grid의 모든 나머지 요소에 영향을 미칩니다.
이제 샘플을 확장하고 IgcGridComponent에 rowHeight 속성을 추가할 수 있습니다.
<igc-grid id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true">
</igc-grid>
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.