Angular 그리드 조건부 스타일링
IgxGrid 구성요소에 사용자 정의 스타일을 제공해야 하는 경우 행 또는 셀 수준에서 수행할 수 있습니다.
Grid Conditional Row Styling
Ignite UI for Angular의 IgxGrid 구성 요소는 사용자 지정 규칙을 기반으로 행의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.
- IgxGrid 구성 요소에서
rowClasses입력을 설정합니다. - IgxGrid 구성 요소에서
rowStyles입력을 설정합니다.
이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.
Using rowClasses
rowClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgxGrid 행의 스타일을 조건부로 지정할 수 있습니다.
<!-- sample.component.html -->
<igx-grid #grid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
...
</igx-grid>
rowClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.
// sample.component.ts
public rowClasses = {
activeRow: this.activeRowCondition
};
public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
// sample.component.scss
::ng-deep {
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
}
::ng-deep 또는 ViewEncapsulation.None 사용하여 현재 구성 요소와 해당 하위 구성 요소에 사용자 정의 스타일을 강제 적용합니다.
Demo
Using rowStyles
이제 열은 데이터 행의 조건부 스타일 지정을 허용하는 rowStyles 속성을 노출합니다. rowClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수도 있습니다.
rowStyles및rowClasses에 대한 콜백 서명은 다음과 같습니다.
(row: RowType) => boolean
스타일을 정의해 보겠습니다.
// component.ts
public rowStyles = {
background: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000',
border: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid',
'border-color': (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9'
};
<!-- sample.component.html -->
<igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%"
[autoGenerate]="false" [allowFiltering]="true" [rowStyles]="rowStyles">
...
</igx-grid>
Demo
Grid Conditional Cell Styling
개요
Ignite UI for Angular의 IgxGrid 구성 요소는 사용자 정의 규칙을 기반으로 셀의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.
-
IgxColumnComponent입력cellClasses키-값 쌍이 포함된 객체 리터럴로 설정합니다. 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 소재 스타일링이 이루어졌습니다.
// component.ts file
public beatsPerMinuteClasses = {
downFont: this.downFontCondition,
upFont: this.upFontCondition
};
...
private downFontCondition = (rowData: any, columnKey: any): boolean => {
return rowData[columnKey] <= 95;
}
// component.scss file
.upFont {
color: red;
}
.downFont {
color: green;
}
Using cellClasses
IgxColumnComponent cellClasses 입력을 설정하여 IgxGrid 셀의 스타일을 조건부로 지정하고 사용자 정의 규칙을 정의할 수 있습니다.
<!-- sample.component.html -->
<igx-column field="BeatsPerMinute" dataType="number" [cellClasses]="beatsPerMinuteClasses"></igx-column>
cellClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.
// sample.component.ts
private upFontCondition = (rowData: any, columnKey: any): boolean => {
return rowData[columnKey] > 95;
}
private downFontCondition = (rowData: any, columnKey: any): boolean => {
return rowData[columnKey] <= 95;
}
public beatsPerMinuteClasses = {
downFont: this.downFontCondition,
upFont: this.upFontCondition
};
// sample.component.scss
::ng-deep {
.upFont {
color: green;
}
.downFont {
color: red;
}
}
::ng-deep 또는 ViewEncapsulation.None 사용하여 현재 구성 요소와 해당 하위 구성 요소에 사용자 정의 스타일을 강제 적용합니다.
Demo
- 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용하는
IgxColumnComponent입력cellStyles사용합니다.
public styles = {
'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
'animation': '0.25s ease-in-out forwards alternate popin'
};
이제
cellStyles및cellClasses에 대한 콜백 서명이 다음으로 변경되었습니다.
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
Using cellStyles
이제 열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles 속성을 노출합니다. cellClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.
위의 샘플 에서는 다음을 만들었습니다.
- 열 인덱스를 기반으로 적용되는 두 가지 스타일입니다.
- 또한 짝수/홀수 행을 기준으로
text color변경합니다.
두
cellStyles에 대한 콜백 서명은 다음과 같습니다.
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
스타일을 정의해 보겠습니다.
// component.ts
public oddColStyles = {
background: 'linear-gradient(to right, #b993d6, #8ca6db)',
color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
animation: '0.75s popin'
};
public evenColStyles = {
background: 'linear-gradient(to right, #8ca6db, #b993d6)',
color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
animation: '0.75s popin'
};
ngOnInit 에서는 IgxGrid 열을 동적으로 생성하는 데 사용되는 사전 정의된 columns 컬렉션의 각 열에 대한 cellStyles 구성을 추가합니다.
// component.ts
public ngOnInit() {
this.data = athletesData;
this.columns = [
{ field: 'Id' },
{ field: 'Position' },
{ field: 'Name' },
{ field: 'AthleteNumber' },
{ field: 'CountryName' }
];
this.applyCSS();
}
public applyCSS() {
this.columns.forEach((column, index) => {
column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
});
}
public updateCSS(css: string) {
this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
this.applyCSS();
}
// component.html
<igx-grid
#grid1 [data]="data"
primaryKey="ID"
width="80%"
height="300px">
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.field"
[cellStyles]="c.cellStyles">
</igx-column>
</igx-grid>
popin 애니메이션 정의
// component.scss
@keyframes popin {
0% {
opacity: 0.1;
transform: scale(.75, .75);
filter: blur(3px) invert(1);
}
50% {
opacity: .5;
filter: blur(1px);
}
100% {
transform: scale(1, 1);
opacity: 1;
filter: none;
}
}
Demo
Known issues and limitations
- 동일한 조건(다른 열의)에 바인딩된 셀이 있고 하나의 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다. 나머지 셀에 변경 사항을 적용하려면 파이프 검사를 수행해야 합니다. 아래 예에서는
spread operator... 에onCellEdit이벤트. 그러면 원본 개체가 새 인스턴스로 복사되고 순수 파이프가 실행됩니다.
public backgroundClasses = {
myBackground: (rowData: any, columnKey: string) => {
return rowData.Col2 < 10;
}
};
...
editDone(evt) {
this.backgroundClasses = {...this.backgroundClasses};
}
<igx-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
<igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
<igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
<igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
</igx-grid>
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub