Angular 그리드 크기

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

    Angular Grid Size Example

    Usage

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

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

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

    • --ig-size-large- 가장 낮은 강도와 행 높이가 50px 인 기본 그리드 크기입니다. 왼쪽 및 오른쪽 패딩은 24px 입니다. 최소 열 width80px 입니다.
    • --ig-size-medium- 행 높이가 40px 인 중간 크기입니다. 왼쪽 및 오른쪽 패딩은 16px 입니다. 최소 열 width64px 입니다.
    • --ig-size-small- 행 높이가 32px 인 가장 작은 크기입니다. 왼쪽 및 오른쪽 패딩은 12px 입니다. 최소 열 width56px 입니다.
    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-grid #grid [data]="data" width="100%" height="550px" [allowFiltering]="true">
        <igx-column-group  header="Customer Information">
        <igx-column field="CustomerName" header="Customer Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column-group  header="Customer Address">
            <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
            <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
                </igx-column>
            <igx-column field="Address" header="Address" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
            <igx-column field="PostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
        </igx-column-group>
        </igx-column-group>
        <igx-column field="Salesperson" header="Sales Person" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="ShipperName" header="Shipper Name"  [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="OrderDate" header="Order Date"  [dataType]="'date'" [sortable]="true" [hasSummary]="true">
            <ng-template igxCell let-cell="cell" let-val>
                {{val | date:'dd/MM/yyyy'}}
            </ng-template>
        </igx-column>
        <igx-column-group  header="Product Details">
            <igx-column field="ProductID" header="ID" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
            </igx-column>
            <igx-column field="ProductName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
            </igx-column>
            <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
            </igx-column>
            <igx-column field="Quantity" header="Quantity" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
            </igx-column>
            <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
        </igx-column-group>
        <igx-column-group  header="Shipping Information">
            <igx-column field="ShipName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column-group  header="Shipping Address">
                <igx-column field="ShipCountry" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
                </igx-column>
                <igx-column field="ShipCity" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
                </igx-column>
                <igx-column field="ShipPostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
                </igx-column>
            </igx-column-group>
        </igx-column-group>
    </igx-grid>
    

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

    @ViewChild('grid', { read: IgxGridComponent })
    public grid: IgxGridComponent;
    
    public selectSize(event: any) {
        this.size = this.sizes[event.index].label;
    }
    
    
    @HostBinding('style.--ig-size')
    protected get sizeStyle() {
        return `var(--ig-size-${this.size})`;
    }
    

    Grid의 행 높이를 변경할 수 있도록 IgxGrid가 제공하는 또 다른 옵션은 rowHeight 속성입니다. 이제 이 속성이--ig-size CSS 변수와 함께 그리드 레이아웃에 어떻게 영향을 미치는지 실제로 살펴보겠습니다.

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

    • --ig-size CSS 변수는 아니요 행 높이에 미치는 영향 만약 있다면 행높이 지정된;
    • --ig-size 위에서 설명한 대로 Grid의 나머지 모든 요소에 영향을 미칩니다.

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

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

    API References

    Additional Resources

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