Angular Grid 条件付きスタイル設定
IgxGrid コンポーネントでカスタム スタイルを提供する必要がある場合は、行レベルまたはセル レベルで行うことができます。
Grid 条件付き行のスタイル設定
Ignite UI for Angular の IgxGrid コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:
- IgxGrid コンポーネントで
rowClasses入力を設定する方法。 - IgxGrid コンポーネントで
rowStyles入力を設定する方法。
さらにこのトピックでは、両方について詳しく説明します。
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 を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。
デモ
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>
デモ
Grid 条件付きセル スタイル設定
概要
Ignite UI for Angular の IgxGrid コンポーネントは、カスタム条件に基づいて 2 通りの条件付きセルのスタイル設定をサポートします。
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;
}
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 を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。
デモ
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
cellStyles の使用
列の cellStyles プロパティを公開。列セルの条件付きスタイリングが可能になりました。cellClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。
上記のサンプルで作成した項目:
- 列インデックスに基づいて適用される 2 つの異なるスタイル。
- また、偶数/奇数行に基づいて
テキストの色を変更します。
両方の
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;
}
}
デモ
既知の問題と制限
- 他の列に同じ条件でバインドされたセルがある場合、その 1 つのセルが更新された際に条件が満たされて要る場合も他のセルが新しい値に基づいて更新されない問題。
残りのセルに変更を適用するには、パイプ チェックを実行する必要があります。以下の例は、
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 リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub