Grid 표시 밀도

    IgxGrid 디자인은 머티리얼 디자인 가이드라인을 기반으로 합니다. 현재 사전 정의된 표시 밀도 옵션 중에서 선택할 수 있는 옵션을 제공합니다. 사용에 적합한 밀도를 선택하면 대량의 콘텐츠와의 상호 작용으로 사용자 경험을 크게 향상시킬 수 있습니다.

    데모

    사용 방법

    위의 데모에서 볼 수 있듯이 IgxGrid는 3가지 밀도 옵션을 제공합니다: compact, cosy, comfortable. 아래의 코드는 displayDensity를 설정하는 방법을 보여줍니다:

    <igx-grid #grid [data]="data" [displayDensity]="'cosy'" >
</igx-grid>

    또는

    ...
this.grid.displayDensity = "cosy";
...

    이제 각 옵션을 Grid 컴포넌트에 반영하는 방법을 자세하게 살펴 보겠습니다. 서로 다른 표시 밀도 옵션 사이에서 전환하면 각 Grid 요소의 높이 및 해당 패딩이 변경됩니다. 또한, 사용자 열 width를 적용하는 경우 왼쪽 및 오른쪽 패딩 합계보다 커야 함에 주의하십시오.

    • comfortable - 이것은 밀도가 가장 낮고 행 높이가 50px인 기본 Grid 표시 밀도입니다. 왼쪽 및 오른쪽 패딩은 24px임; 최소 열 width는 48px임;
    • cosy - 이것은 행 높이가 40px인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은 16px임; 최소 열 width는 32px임;
    • compact - 이것은 행 높이가 32px인 최고 밀도입니다. 왼쪽 및 오른쪽 패딩은 12px임; 최소 열 width는 24px임;
    Note

    현재 크기를 재정의 할 수는 없습니다.

    계속하여 샘플을 사용해 displayDensity의 적용 방법을 살펴 보겠습니다. 먼저 각 밀도를 전환하는데 도움이 되는 버튼을 추가해 보겠습니다:

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

    @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public density = "compact";
public displayDensities;

public ngOnInit() {
    this.displayDensities = [
        {
            label: "compact",
            selected: this.density === "compact",
            togglable: true
        },
        {
            label: "cosy",
            selected: this.density === "cosy",
            togglable: true
        },
        {
            label: "comfortable",
            selected: this.density === "comfortable",
            togglable: true
        }
    ];
}

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

    <div class="density-chooser">
    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
</div>
<igx-grid #grid [data]="data" [displayDensity]="density" 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 selectDensity(event) {
    this.density = this.displayDensities[event.index].label;
}

    IgxGrid의 Grid 행 높이를 변경할 수 있도록 제공하는 다른 옵션은 rowHeight 속성입니다. 이 속성이 displayDensity 옵션과 함께 Grid 레이아웃에 어떻게 영향을 미치는지 살펴 보겠습니다.

    다음 사항에 유의하십시오:

    • rowHeight가 지정된 경우, displayDensity 옵션은 행 높이에 영향을 주지 않습니다;
    • displayDensity는 상기의 설명대로 그리드의 나머지 요소에 모두 영향을 줍니다;

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

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

    API 참조

    추가 리소스

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