Angular 계층형 그리드 크기

    IgxHierarchicalGrid 디자인은 머티리얼 디자인 지침을 기반으로 합니다. 현재 우리는 각각 소형, 중형, 대형 보기를 가져오는 사전 정의된 크기 옵션 세트 중에서 선택할 수 있는 옵션을 제공합니다. 머티리얼 UI 테이블/머티리얼 UI 그리드에 적합한 크기를 선택하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 경험을 크게 향상시킬 수 있습니다.

    Angular Hierarchical Grid Size Example

    Usage

    위의 데모에서 볼 수 있듯이 IgxHierarchicalGrid는​ ​소형, 중형, 대형의 세 가지 크기 옵션을 제공합니다. 아래 코드 조각은 크기를 설정하는 방법을 보여줍니다.

    <igx-hierarchical-grid #hierarchicalGrid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-hierarchical-grid>

    이제 각 옵션이 계층형 그리드 구성 요소에 어떻게 반영되는지 자세히 살펴보겠습니다. 다양한 크기 사이를 전환하면 각 계층형 그리드 요소의 높이와 해당 패딩이 변경됩니다. 또한 사용자 정의 열 너비를 적용하려면 왼쪽 패딩과 오른쪽 패딩의 합보다 커야 한다는 점을 고려하시기 바랍니다.

    • --ig-size-large - this is the default Hierarchical Grid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column width is 80px;
    • --ig-size-medium - this is the middle size with 40px row height. Left and Right paddings are 16px; Minimal column width is 64px;
    • --ig-size-small - this is the smallest size with 32px row height. Left and Right paddings are 12px; Minimal column width is 56px;
    Note

    현재는 어떤 크기도 재정의 할 수 없다는 점에 유의하세요.

    이제 샘플을 계속 진행하여 각 크기가 어떻게 적용되는지 실제로 살펴보겠습니다. 먼저 각 크기 간을 전환하는 데 도움이 되는 버튼을 추가해 보겠습니다.

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes"></igx-buttongroup>
</div>

    @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public size = 'small';
public sizes;

public ngOnInit() {
    this.sizes = [
        {
            label: 'small',
            selected: this.size === 'small',
            togglable: true
        },
        {
            label: 'medium',
            selected: this.sie === 'medium',
            togglable: true
        },
        {
            label: 'large',
            selected: this.size === 'large',
            togglable: true
        }
    ];
}

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

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</div>
<igx-hierarchical-grid #hGrid [data]="localdata" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
    <igx-column field="CustomerID"></igx-column>
    <igx-column field="CompanyName"></igx-column>
    <igx-column field="ContactName"></igx-column>
    <igx-column field="ContactTitle"></igx-column>
    <igx-column field="Address"></igx-column>
    <igx-column field="City"></igx-column>
    <igx-column field="PostalCode"></igx-column>
    <igx-column field="Country"></igx-column>
    <igx-column field="Phone"></igx-column>
    <igx-column field="Fax"></igx-column>

    <igx-row-island [key]="'Orders'" [autoGenerate]="false" #layout1 >
            <igx-column field="OrderID"></igx-column>
            <igx-column field="EmployeeID"></igx-column>
            <igx-column field="OrderDate"></igx-column>
            <igx-column field="RequiredDate"></igx-column>
            <igx-column field="ShippedDate"></igx-column>
            <igx-column field="ShipVia"></igx-column>
            <igx-column field="Freight"></igx-column>
            <igx-column field="ShipName"></igx-column>
            <igx-column field="ShipAddress"></igx-column>
            <igx-column field="ShipCity"></igx-column>
            <igx-column field="ShipPostalCode"></igx-column>
            <igx-column field="ShipCountry"></igx-column>
        <igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
                <igx-column field="ProductID"></igx-column>
                <igx-column field="UnitPrice"></igx-column>
                <igx-column field="Quantity"></igx-column>
                <igx-column field="Discount"></igx-column>
        </igx-row-island>
    </igx-row-island>

</igx-hierarchical-grid>

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

    @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent })
public hierarchicalGrid: IgxHierarchicalGridComponent;

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

    Another option that IgxHierarchicalGrid provides for you, in order to be able to change the height of the rows in the Hierarchical Grid, is the property rowHeight. So let's see in action how this property affects the Hierarchical Grid layout along with the --ig-size CSS variable.

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

    • --ig-size CSS variable will have NO impact on row height if there is rowHeight specified;
    • --ig-size will affect all of the rest elements in the Hierarchical Grid, as it has been described above;

    And now we can extend our sample and add rowHeight property to the Hierarchical Grid:

    <igx-hierarchical-grid #hierarchicalGrid [data]="data" [rowHeight]="'80px'" width="100%" 
height="550px" [allowFiltering]="true">
..............
</igx-hierarchical-grid>

    API References

    Additional Resources

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