React 계층형 그리드 크기

The Ignite UI for React Size feature in React Hierarchical Grid allows users to control the spacing and layout of data within the IgrHierarchicalGrid. 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

React Hierarchical Grid Size Example

Usage

위 데모에서 보시다시피, 이 시스템은IgrHierarchicalGrid​ ​스몰, 미디 엄, 라지 세 가지 사이즈 옵션을 제공합니다. 아래 코드 스니펫은 CSS 클래스의 인라인 또는 일부를 설정--ig-size 하는 방법을 보여줍니다:

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<IgrHierarchicalGrid className="gridSize"></IgrHierarchicalGrid>

이제 각 옵션이 컴포넌트에IgrHierarchicalGrid 어떻게 반영되는지 자세히 살펴보겠습니다. 서로 다른 크기 옵션을 전환할 때 각IgrHierarchicalGrid 요소의 높이와 해당 패딩이 바뀝니다. 또한 커스텀 컬럼width을 적용하려면 좌우 패딩 합보다 커야 한다는 점을 고려해 주세요:

• 큰- 기본IgrHierarchicalGrid 크기로, 가장 낮은 강도와 행 높이가 같습니다.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 어떻게 적용되는지 살펴보겠습니다. 먼저 각 사이즈를 전환할 수 있도록 도와주는 버튼을 추가해 보겠습니다:

<IgrPropertyEditorPanel
    ref={propertyEditorRef}
    componentRenderer={renderer}
    target={grid}
    descriptionType="WebHierarchicalGrid"
    isHorizontal={true}
    isWrappingEnabled={true}>
    <IgrPropertyEditorPropertyDescription
        name="SizeEditor"
        label="Grid Size:"
        valueType="EnumValue"
        dropDownNames={["Small", "Medium", "Large"]}
        dropDownValues={["Small", "Medium", "Large"]}
        changed={webGridSetGridSize}>
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>

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

<IgrHierarchicalGrid
    autoGenerate={false}
    ref={grid}
    allowFiltering={true}>
    <IgrColumn field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumn field="CompanyName" dataType="string"></IgrColumn>
    <IgrColumn field="ContactName" dataType="string"></IgrColumn>
    <IgrColumn field="Address" dataType="string"></IgrColumn>
    <IgrColumn field="City" dataType="string"></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string"></IgrColumn>
    <IgrColumn field="Country" dataType="string"></IgrColumn>
    <IgrColumn field="Phone" dataType="string"></IgrColumn>
    <IgrColumn field="Fax" dataType="string"></IgrColumn>

    <IgrRowIsland childDataKey="Orders" autoGenerate={false}>
        <IgrColumn field="OrderID" dataType="number"></IgrColumn>
        <IgrColumn field="EmployeeID" dataType="number"></IgrColumn>
        <IgrColumn field="OrderDate" dataType="date"></IgrColumn>
        <IgrColumn field="RequiredDate" dataType="date"></IgrColumn>
        <IgrColumn field="ShippedDate" dataType="date"></IgrColumn>
        <IgrColumn field="ShipVia" dataType="number"></IgrColumn>
        <IgrColumn field="Freight" dataType="number"></IgrColumn>
        <IgrColumn field="ShipName" dataType="string"></IgrColumn>
        <IgrColumn field="ShipAddress" dataType="string"></IgrColumn>
        <IgrColumn field="ShipCity" dataType="string"></IgrColumn>
        <IgrColumn field="ShipPostalCode" dataType="string"></IgrColumn>
        <IgrColumn field="ShipCountry" dataType="string"></IgrColumn>

        <IgrRowIsland childDataKey="OrderDetails" autoGenerate={false}>
            <IgrColumn field="ProductID" dataType="number"></IgrColumn>
            <IgrColumn field="UnitPrice" dataType="number"></IgrColumn>
            <IgrColumn field="Quantity" dataType="number"></IgrColumn>
            <IgrColumn field="Discount" dataType="number"></IgrColumn>
        </IgrRowIsland>
    </IgrRowIsland>
</IgrHierarchicalGrid>

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

private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
    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})`);
}

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

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

• --ig-sizeCSS 변수가 지정되어rowHeight​ 있으면 행 높이에 영향을 미치지 않습니다.
• --ig-size will affect all of the rest elements in the Hierarchical Grid, as it has been described above.

이제 샘플을 확장하여 다음rowHeight 속성에 추가할IgrHierarchicalGrid 수 있습니다:

<IgrHierarchicalGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrHierarchicalGrid>

API References

• IgrHierarchicalGrid
• IgrColumn

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

• Ignite UI for React Forums
• Ignite UI for React GitHub