React 그리드 크기

    React Grid의 Ignite UI for React 크기 기능을 사용하면 사용자가 데이터 내의 간격과 레이아웃을 제어할 수 있습니다 IgrGrid. 변경--ig-size 하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 환경을 크게 향상시킬 수 있습니다. 세 가지 크기 옵션 중에서 선택할 수 있습니다.

    • --ig-size-large
    • --ig-size-medium
    • --ig-size-small

    React Grid Size Example

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Usage

    위의 데모에서 볼 수 있듯이 IgrGrid 세 가지 크기 옵션을 제공합니다. 작다, 보통 그리고 큰. 아래 코드 스니펫은 설정 방법을 보여줍니다.--ig-size 인라인 또는 CSS 클래스의 일부 :

    .gridSize {
    --ig-size: var(--ig-size-medium);
}
css
    <IgrGrid className="gridSize"></IgrGrid>
tsx

    이제 각 옵션이 구성 요소에 어떻게 반영되는지 IgrGrid 자세히 살펴보겠습니다. 다른 크기 옵션 간에 전환하면 각 IgrGrid 요소의 높이와 해당 패딩이 변경됩니다. 또한 사용자 정의 열을 width 적용하려면 왼쪽과 오른쪽 패딩의 합보다 커야 한다는 사실을 고려하십시오.

    • 큰- 이것이 기본값입니다. IgrGrid 가장 낮은 강도와 행 높이가 같은 크기 50px. 왼쪽 및 오른쪽 패딩은 다음과 같습니다. 24px; 최소 열 width 다음과 같음 80px;
    • 중간- 이것은 행 높이가 있는 40px 중간 강렬한 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 16px. 최소 열 width은 다음과 같습니다 64px.
    • small- 강렬하고 32px 행 높이가 가장 높은 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 12px. 최소 열 width은 다음과 같습니다 56px.

    Please keep in mind that currently you can not override any of the sizes.

    이제 샘플을 계속 진행하면서 가--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={webGridSetGridSize}>
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
tsx

    이제 마크업을 추가할 수 있습니다.

    <IgrGrid 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="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>
tsx

    마지막으로 실제로 크기를 적용하는 데 필요한 논리를 제공하겠습니다.

    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})`);
}
tsx

    행 IgrGrid의 높이를 변경할 수 있도록 제공하는 또 다른 옵션은 IgrGrid 속성 rowHeight 입니다. 이 속성이 레이아웃에 IgrGrid​--ig-size 어떤 영향을 미치는지 실제로 살펴 보겠습니다.

    다음 사항에 유의하시기 바랍니다.

    • --ig-size CSS 변수가 지정된 경우 rowHeight​ 행 높이에 영향을 미치지 않습니다.
    • --ig-size 위에서 설명한 것처럼 Grid의 모든 나머지 요소에 영향을 미칩니다.

    이제 샘플을 확장하고 IgrGrid에 rowHeight 속성을 추가할 수 있습니다.

    <IgrGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrGrid>
tsx
    Ignite UI for React | CTA Banner

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.