React Grid (グリッド) のテーマ設定
React テーマ CSS を使用すると、Ignite UI for React Grid をブランド アイデンティティに合わせて簡単にカスタマイズできます。 定義済みのテーマとパレットに加えて、CSS カスタム プロパティの代替セットを使用して、データ グリッドのルック アンド フィールをさらにカスタマイズできます。
利用可能なテーマ プロパティ
| プロパティ名 | 型 | 説明 |
|---|---|---|
| –grid-elevation | 0〜24 の間の数値 | グリッドに使用されるエレベーション レベル。 |
| –drag-elevation | 0〜24 の間の数値 | 移動可能な要素 (列ヘッダーなど) に使用されるエレベーション レベル。 |
| –grouparea-color | color | グリッド グループ領域テキストの色 |
| –grouparea-background | color | グリッド グループ領域テキストの色 |
| –drop-area-text-color | color | ドロップ領域テキストの色 |
| –drop-area-icon-color | color | ドロップ領域アイコンの色 |
| –drop-area-background | color | ドロップ領域の背景色 |
| –drop-area-on-drop-background | color | ドロップ時のドロップ領域の背景色 |
| –header-background | color | グリッド ヘッダーの背景色 |
| –header-text-color | color | グリッド ヘッダーのテキストの色 |
| –header-selected-background | color | 選択時のグリッド ヘッダーの背景色 (列の選択など)。 |
| –header-selected-text-color | color | 選択時のグリッド ヘッダーのテキストの色 (列の選択など)。 |
| –sortable-header-icon-hover-color | color | 列のソートが可能な場合のグリッド ヘッダーのホバーのアイコンの色。 |
| –sorted-header-icon-color | color | ソートされたテーブル ヘッダー アイコンの色。 |
| –header-border-width | border-width | ヘッダー境界線に使用される境界線の幅。 |
| –header-border-style | border-style | ヘッダー境界線に使用される境界線のスタイル。‘dotted’、‘dashed’、‘solid’ のいずれかを指定できます |
| –header-border-color | color | ヘッダー境界線に使用される色。 |
| –ghost-header-background | color | ドラッグされたヘッダーの背景色。 |
| –ghost-header-text-color | color | ドラッグされたヘッダーテキストの色。 |
| –ghost-header-icon-color | color | ドラッグされたヘッダー アイコンの色。 |
| –filtering-background-and | color | 高度なフィルタリングの 「AND」 条件の背景色。 |
| –filtering-background-or | color | 高度なフィルタリングの 「AND」 条件のフォーカス/選択の背景色。 |
| –filtering-background-and–focus | color | 高度なフィルタリングの 「OR」 条件の背景色。 |
| –filtering-background-or–focus | color | 高度なフィルタリングの 「OR」 条件のフォーカス/選択の背景色。 |
| –grid-border-color | color | グリッドを囲む境界線の色。 |
| –content-background | color | グリッド本体の背景色。 |
| –content-text-color | color | グリッド本体のテキストの色。 |
| –row-odd-background | color | 奇数行の背景色。 |
| –row-even-background | color | 偶数行の背景色。 |
| –row-odd-text-color | color | 奇数行テキストの色。 |
| –row-even-text-color | color | 偶数行テキストの色。 |
| –row-selected-background | color | 選択された行の背景色。 |
| –tree-selected-filtered-row-text-color | color | 選択された/フィルターされた行のテキストの色。 |
| –row-selected-text-color | color | 選択された行のテキストの色。 |
| –cell-selected-within-background | color | 選択した行/列内の選択したセルの背景。 |
| –cell-selected-within-text-color | color | 選択した行/列内の選択したセルの色。 |
| –row-selected-hover-background | color | 選択された行のホバーの背景色。 |
| –row-selected-hover-text-color | color | 選択された行のホバー状態のテキストの色。 |
| –row-hover-background | color | ホバー行の背景色。 |
| –row-hover-text-color | color | ホバー行のテキストの色。 |
| –row-border-color | color | グリッド本体の行間の境界線の色。 |
| –pinned-border-width | border-width | ピン固定された行/列の境界線の幅。 |
| –pinned-border-style | border-style | ピン固定された行/列の境界線のスタイル。‘dotted’、‘dashed’、‘solid’ のいずれかを指定できます |
| –pinned-border-color | color | ピン固定された行/列の境界線の色。 |
| –cell-active-border-color | color | アクティブな (フォーカスされる) セルの境界線の色。 |
| –cell-selected-background | color | 選択されたセルの背景色。 |
| –tree-selected-filtered-cell-text-color | color | 選択された/フィルターされたセルのテキストの色。 |
| –cell-selected-text-color | color | 選択されたセルのテキストの色。 |
| –cell-editing-background | color | 編集モードのセルの背景色。 |
| –edit-mode-color | color | 編集モードのテキストの色 |
| –edited-row-indicator | color | 編集された行のインジケーターの色。 |
| –cell-new-color | color | 編集されていない新しいセルのテキストの色。グリッドに新しい行を追加するときに使用されます。 |
| –cell-edited-value-color | color | セル編集値の色。 |
| –cell-disabled-color | color | 無効なセルのテキストの色。 |
| –resize-line-color | color | グリッド ヘッダーのサイズ変更線の色。 |
| –drop-indicator-color | color | ドロップ インジケーターの色。 |
| –group-label-column-name-text | color | グリッド グループ行名前のテキストの色。 |
| –group-label-icon | color | グリッド グループ行アイコンの色。 |
| –group-label-text | color | グリッド グループ行テキストの色。 |
| –expand-all-icon-color | color | グリッド ヘッダーにある、すべてのグループ行を展開するアイコンの色。 |
| –expand-all-icon-hover-color | color | グリッド ヘッダーにある、すべてのグループ行を展開するアイコンのホバー時の色。 |
| –expand-icon-color | color | グリッド行の展開アイコンの色。 |
| –expand-icon-hover-color | color | グリッド行の展開アイコン ホバーの色。 |
| –active-expand-icon-color | color | アクティブな展開アイコンの色。 |
| –active-expand-icon-hover-color | color | アクティブな展開アイコンのホバー時の色。 |
| –group-count-background | color | グリッド グループの行数バッジの背景色。 |
| –group-count-text-color | color | グリッド グループの行数バッジのテキストの色。 |
| –group-row-background | color | グリッド グループ行の背景色。 |
| –group-row-selected-background | color | 選択されたグリッド グループ行の背景色。 |
| –filtering-header-background | color | フィルター済み列ヘッダーの背景色。 |
| –filtering-header-text-color | color | フィルター済み列ヘッダーテキストの色。 |
| –filtering-row-background | color | フィルタリング行の背景色。 |
| –filtering-row-text-color | color | フィルタリング行のテキストの色。 |
| –tree-filtered-text-color | color | フォーカスされているグループ化行の背景色。 |
| –body-summaries-background | color | 本体に配置される集計グループの背景色。 |
| –body-summaries-text-color | color | 本体に配置される集計グループのテキストの色。 |
| –root-summaries-background | color | フッターに配置される集計グループの背景色。 |
| –root-summaries-text-color | color | フッターに配置される集計グループのテキストの色。 |
| –row-highlight | color | グリッド行の強調表示の色。 |
| –row-ghost-background | color | ドラッグされた行の背景色。 |
| –row-drag-color | color | ドラッグ ハンドルの色。 |
| –drop-area-border-radius | 0〜1 の間の数値 | ドロップ領域に使用される境界半径。0〜1 の任意の小数、ピクセル、またはパーセントを指定できます。 |
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。