Angular 계층형 그리드 크기
IgxHierarchicalGrid 디자인은 머티리얼 디자인 지침을 기반으로 합니다. 현재 우리는 각각 소형, 중형, 대형 보기를 가져오는 사전 정의된 크기 옵션 세트 중에서 선택할 수 있는 옵션을 제공합니다. 머티리얼 UI 테이블/머티리얼 UI 그리드에 적합한 크기를 선택하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 경험을 크게 향상시킬 수 있습니다.
Angular 계층형 그리드 크기 예
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
용법
위의 데모에서 볼 수 있듯이 IgxHierarchicalGrid는 소형, 중형, 대형의 세 가지 크기 옵션을 제공합니다. 아래 코드 조각은 크기를 설정하는 방법을 보여줍니다.
<igx-hierarchical-grid #hierarchicalGrid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-hierarchical-grid>
html
이제 각 옵션이 계층형 그리드 구성 요소에 어떻게 반영되는지 자세히 살펴보겠습니다. 다양한 크기 사이를 전환하면 각 계층형 그리드 요소의 높이와 해당 패딩이 변경됩니다. 또한 사용자 정의 열 너비를 적용하려면 왼쪽 패딩과 오른쪽 패딩의 합보다 커야 한다는 점을 고려하시기 바랍니다.
- --ig-size-large- 가장 낮은 강도와 행 높이가
50px
인 기본 계층형 그리드 크기입니다. 왼쪽 및 오른쪽 패딩은24px
입니다. 최소 열width
는80px
입니다. - --ig-size-medium- 행 높이가
40px
인 중간 크기입니다. 왼쪽 및 오른쪽 패딩은16px
입니다. 최소 열width
는64px
입니다. - --ig-size-small- 행 높이가
32px
인 가장 작은 크기입니다. 왼쪽 및 오른쪽 패딩은12px
입니다. 최소 열width
는56px
입니다.
현재는 어떤 크기도 재정의 할 수 없다는 점에 유의하세요.
이제 샘플을 계속 진행하여 각 크기가 어떻게 적용되는지 실제로 살펴보겠습니다. 먼저 각 크기 간을 전환하는 데 도움이 되는 버튼을 추가해 보겠습니다.
<div class="density-chooser">
<igx-buttongroup [values]="sizes"></igx-buttongroup>
</div>
html
@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
}
];
}
typescript
이제 마크업을 추가할 수 있습니다.
<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>
html
마지막으로 실제로 크기를 적용하는 데 필요한 논리를 제공하겠습니다.
@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})`;
}
typescript
Hierarchical Grid의 행 높이를 변경할 수 있도록 IgxHierarchicalGrid가 제공하는 또 다른 옵션은 rowHeight
속성입니다. 이제 이 속성이--ig-size
CSS 변수와 함께 계층적 그리드 레이아웃에 어떻게 영향을 미치는지 실제로 살펴보겠습니다.
다음 사항에 유의하시기 바랍니다.
--ig-size
CSS 변수는 아니요 행 높이에 미치는 영향 만약 있다면 행높이 지정된;--ig-size
위에서 설명한 대로 계층 그리드의 나머지 모든 요소에 영향을 미칩니다.
이제 샘플을 확장하고 계층 그리드에 rowHeight
속성을 추가할 수 있습니다.
<igx-hierarchical-grid #hierarchicalGrid [data]="data" [rowHeight]="'80px'" width="100%"
height="550px" [allowFiltering]="true">
..............
</igx-hierarchical-grid>
html