Ignite UI for Blazor のグリッドコンポーネント IgbGrid にはビルトインで CSS カスタムプロパティが組み込まれています。それら CSS カスタムプロパティの値を上書きすることで、

  • 奇数行と偶数行とで異なる背景色を指定してストライプ表示を実現したり、
  • ヘッダーや選択行、マウスホバー行の配色を変更したり

といったカスタマイズをすることができます。

具体的な CSS カスタムプロパティの名前とその適用先については下記サンプルコードを参照ください。

/* App.razor.css */
::deep igc-grid {
    /* 
     * ヘッダーの背景 (...-background) とテキスト色 (...-text-color) */
    --header-background: #333;
    --header-text-color: #ccc;
    /* 
     * 奇数行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-odd-background: whitesmoke;
    --row-odd-text-color: #666;
    /* 
     * 偶数行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-even-background: gainsboro;
    --row-even-text-color: #555;
    /* 
     * マウスホバー行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-hover-background: lightblue;
    --row-hover-text-color: steelblue;
    /* 
     * 選択行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-selected-background: lightpink;
    --row-selected-text-color: deeppink;
    /* 
     * マウスホバー選択行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-selected-hover-background: hotpink;
    --row-selected-hover-text-color: lightpink;
    /* 
     * 選択セルの背景 (...-background) とテキスト色 (...-text-color) 
     * (※ backgroud 指定なので、色に限らず、画像やストライプ効果なども指定できる)*/
    --cell-selected-within-background: repeating-linear-gradient(
        135deg,
        deeppink 0,
        deeppink 6px,
        hotpink 6px,
        hotpink 12px);
    --cell-selected-within-text-color: white;
}

    ::deep igc-grid igx-checkbox {
        /* 
         * IgbGrid 内のチェックボックスの背景色 */
        --fill-color: deeppink;
    }

実行結果

サンプル

ヘルプドキュメント

 

Tagged:

製品について

Ignite UI for Blazor