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 - this is the default Grid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column width is 80px;
    • --이-사이즈-미디엄- 중간 사이즈40px에 줄 높이가 있는 사이즈입니다. 왼쪽과 오른쪽 패딩은 다음과 같습니다16px; 최소 열width은 다음과 같습니다64px;
    • --ig-사이즈-small- 이게 줄 높이가32px 있는 가장 작은 사이즈야. 왼쪽과 오른쪽 패딩은 다음과 같습니다12px; 최소 열width은 다음과 같습니다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-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})`;
}

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

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

    • --ig-sizeCSS 변수는 다음과 같습니다 아니요 줄 높이에 미치는 영향 만약 행높이 지정;
    • --ig-size will affect all of the rest elements in the Grid, as it has been described above;

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

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

    API References

    Additional Resources

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