コンポーネントのサイズに基づいて値を切り替えるために使用されます。 渡されたサイズは、比較する前に絶対値に変換されます。
--size: #{sizable(rem(40px), rem(64px), rem(88px))};| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $sm * | Number | - | コンポーネントのサイズが small の場合の優先値。 |
| $md | Number | $sm | コンポーネントのサイズが medium の場合の優先値。 |
| $lg | Number | $md | コンポーネントのサイズが large の場合の優先値。 |
$custom-chart-theme: category-chart-theme($brushes: (red, green, blue));// css-vars ミックスインへテーマを渡します。@include css-vars($custom-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $margin | List | null | チャート コンテンツのマージン (top、right、bottom および left) を設定します。 |
| $brushes | List | series | 自動的に割り当てられるシリーズのブラシ色から選択されるパレットを定義します。 |
| $marker-brushes | List | series | 自動的に割り当てられるシリーズのマーカー ブラシ色から選択されるパレットを定義します。 |
| $negative-brushes | List | series | ウォーターフォールなどのコンテキストの色を持つチャート タイプで負の要素の描画に使用するパレットを定義します。 |
| $outlines | List | series | 自動的に割り当てられるシリーズのアウトラインの色から選択されるパレットを定義します。 |
| $marker-outlines | List | series | 自動的に割り当てられるシリーズのマーカー アウトラインの色から選択されるパレットを定義します。 |
| $negative-outlines | List | series | ウォーターフォールなどのコンテキストの色を持つチャート タイプで負の要素の描画に使用するブラシを定義します。 |
| $title-alignment | String | null | タイトルに使用する水平方向。 |
| $title-margin | List | null | チャート タイトルのマージン (top、right、bottom および left) を設定します。 |
| $title-text-color | Color | null | チャート タイトルの色を設定します。 |
| $title-text-style | String | null | チャート タイトルの CSS フォント プロパティを設定します。 |
| $subtitle-margin | List | null | チャート サブタイトルのマージン (top、right、bottom および left) を設定します。 |
| $subtitle-alignment | String | null | サブタイトルに使用する水平方向。 |
| $subtitle-text-color | Color | null | チャート サブタイトルの色を設定します。 |
| $subtitle-text-style | String | null | チャート サブタイトルの CSS フォント プロパティを設定します。 |
| $thickness | Number | null | チャートのすべてのシリーズの太さを設定します。 |
| $trend-line-brushes | List | series | チャートでトレンドラインの色に使用されるブラシのパレットを定義します。 |
| $trend-line-thickness | Number | null | ポイント、折れ線、スプラインまたはバブル型のチャートのトレンドラインの太さを設定します。 |
| $x-axis-label-margin | List | null | X 軸のラベルのマージン (top、right、bottom および left) を設定します。 |
| $x-axis-label-text-color | Color | null | X 軸のラベルの色を設定します。 |
| $x-axis-label-text-style | String | null | X 軸のラベルに CSS フォント プロパティを設定します。 |
| $x-axis-label-vertical-alignment | String | null | X 軸ラベルの垂直方向の配置を設定します。 |
| $x-axis-major-stroke | Color | null | X 軸の主グリッド線に適用する色を設定します。 |
| $x-axis-major-stroke-thickness | Number | null | X 軸の主グリッド線に適用する太さを設定します。 |
| $x-axis-minor-stroke | Color | null | X 軸の副グリッド線に適用する色を設定します。 |
| $x-axis-minor-stroke-thickness | Number | null | X 軸の副グリッド線に適用する太さを設定します。 |
| $x-axis-strip | Color | null | X 軸の背景の縞模様に適用する色を設定します。 |
| $x-axis-stroke | Color | null | X 軸線に適用する色を設定します。 |
| $x-axis-stroke-thickness | Number | null | X 軸線に適用する太さを設定します。 |
| $x-axis-tick-length | Number | null | X 軸の目盛りの長さを設定します。 |
| $x-axis-tick-stroke | Color | null | X 軸の目盛りに適用する色を設定します。 |
| $x-axis-tick-stroke-thickness | Number | null | X 軸の目盛りに適用する太さを設定します。 |
| $x-axis-title-alignment | String | null | X 軸タイトルの水平方向の配置を設定します。 |
| $x-axis-title-margin | List | null | X 軸のタイトルのマージン (top、right、bottom および left) を設定します。 |
| $x-axis-title-text-color | Color | null | X 軸のタイトルの色を設定します。 |
| $x-axis-title-text-style | String | null | X 軸のタイトルに CSS フォント プロパティを設定します。 |
| $y-axis-label-margin | List | null | Y 軸のラベルのマージン (top、right、bottom および left) を設定します。 |
| $y-axis-label-text-color | Color | null | Y 軸のラベルの色を設定します。 |
| $y-axis-label-text-style | String | null | Y 軸のラベルに CSS フォント プロパティを設定します。 |
| $y-axis-label-vertical-alignment | String | null | Y 軸ラベルの垂直方向の配置を設定します。 |
| $y-axis-major-stroke | Color | null | Y 軸の主グリッド線に適用する色を設定します。 |
| $y-axis-major-stroke-thickness | Number | null | Y 軸の主グリッド線に適用する太さを設定します。 |
| $y-axis-minor-stroke | Color | null | Y 軸の副グリッド線に適用する色を設定します。 |
| $y-axis-minor-stroke-thickness | Number | null | Y 軸の副グリッド線に適用する太さを設定します。 |
| $y-axis-strip | Color | null | Y 軸の背景の縞模様に適用する色を設定します。 |
| $y-axis-stroke | Color | null | Y 軸線に適用する色を設定します。 |
| $y-axis-stroke-thickness | Number | null | Y 軸線に適用する太さを設定します。 |
| $y-axis-title-alignment | String | null | Y 軸タイトルの水平方向の配置を設定します。 |
| $y-axis-title-margin | List | null | Y 軸のタイトルのマージン (top、right、bottom および left) を設定します。 |
| $y-axis-title-text-color | Color | null | Y 軸のタイトルの色を設定します。 |
| $y-axis-title-text-style | String | null | Y 軸のタイトルに CSS フォント プロパティを設定します。 |
| $y-axis-tick-length | Number | null | Y 軸の目盛りの長さを設定します。 |
| $y-axis-tick-stroke | Color | null | Y 軸の目盛りに適用する色を設定します。 |
| $y-axis-tick-stroke-thickness | Number | null | Y 軸の目盛りに適用する太さを設定します。 |
$my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));// css-vars ミックスインへテーマを渡します。@include css-vars($my-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $margin | List | null | チャート コンテンツのマージン (top、right、bottom および left) を設定します。 |
| $title-text-color | Color | null | チャート タイトルの色を設定します。 |
| $title-margin | List | null | チャート タイトルのマージン (top、right、bottom および left) を設定します。 |
| $subtitle-text-color | Color | null | チャート サブタイトルの色を設定します。 |
| $subtitle-margin | List | null | チャート サブタイトルのマージン (top、right、bottom および left) を設定します。 |
| $brushes | List | null | 自動的に割り当てられるシリーズの色から選択されるパレットを定義します。 |
| $marker-brushes | List | null | 自動的に割り当てられるマーカー ブラシから選択されるパレットを定義します。 |
| $outlines | List | null | 自動的に割り当てられるシリーズのアウトラインの色から選択されるパレットを定義します。 |
| $marker-outlines | List | null | 自動的に割り当てられるマーカー アウトラインから選択されるパレットを定義します。 |
| $plot-area-background | Color | null | 現在の Chart オブジェクトのプロット領域の背景として使用するブラシを設定します。 |
| $title-horizontal-alignment | String | null | タイトルに使用する水平方向。有効なオプションは 'left'、'center'、'right' です。 |
| $subtitle-horizontal-alignment | String | null | サブタイトルに使用する水平方向。有効なオプションは 'left'、'center'、'right' です。 |
| $axis-label-margin | List | null | 両方の軸のラベルのマージン (top、right、bottom および left) を設定します。 |
| $axis-label-text-color | Color | null | 両方の軸のラベルの色を設定します。 |
| $axis-label-text-style | String | null | 両方の軸のラベルに CSS フォント プロパティを設定します。 |
| $axis-label-vertical-alignment | String | null | X 軸ラベルの垂直方向の配置を設定します。 |
| $axis-major-stroke | Color | null | 両方の軸の主グリッド線に適用する色を設定します。 |
| $axis-major-stroke-thickness | Number | null | 両方の軸の主グリッド線に適用する太さを設定します。 |
| $axis-minor-stroke | Color | null | 両方の軸の副グリッド線に適用する色を設定します。 |
| $axis-minor-stroke-thickness | Number | null | 両方の軸の副グリッド線に適用する太さを設定します。 |
| $axis-strip | Color | null | 両方の軸の背景の縞模様に適用する色を設定します。 |
| $axis-stroke | Color | null | 両方の軸に適用する色を設定します。 |
| $axis-stroke-thickness | Number | null | 両方の軸に適用する太さを設定します。 |
| $axis-tick-length | Number | null | 両方の軸の目盛りの長さを設定します。 |
| $axis-tick-stroke | Color | null | 両方の軸の目盛りに適用する色を設定します。 |
| $axis-tick-stroke-thickness | Number | null | 両方の軸の目盛りに適用する太さを設定します。 |
| $axis-title-alignment | String | null | 両方の軸の水平方向の配置を設定します。 |
| $axis-title-margin | List | null | 両方の軸のタイトルのマージン (top、right、bottom および left) を設定します。 |
| $axis-title-text-color | Color | null | X 軸のタイトルの色を設定します。 |
| $axis-title-text-style | String | null | 両方の軸のタイトルに CSS フォント プロパティを設定します。 |
$my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));// css-vars ミックスインへテーマを渡します。@include css-vars($my-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $others-category-fill | Color | null | その他のカテゴリの塗りつぶし色を設定します。 |
| $others-category-opacity | Number | null | その他のカテゴリの不透明度を設定します。 |
| $others-category-stroke | Color | null | その他のカテゴリのストローク色を設定します。 |
| $others-category-stroke-thickness | Number | null | その他のカテゴリのストロークの太さを設定します。 |
| $selected-slice-fill | Color | null | 選択されたスライスの塗りつぶし色を設定します。 |
| $selected-slice-opacity | Number | null | 選択されたスライスの不透明度を設定します。 |
| $selected-slice-stroke | Color | null | 選択されたスライスのストローク色を設定します。 |
| $selected-slice-stroke-thickness | Number | null | 選択されたスライスのストロークの太さを設定します。 |
$custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));// css-vars ミックスインへテーマを渡します。@include css-vars($custom-gauge-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $backing-brush | Color | null | リニア ゲージの裏張りを塗りつぶすために使用する色を設定します。 |
| $backing-outline | Color | null | 裏張りのアウトラインに使用する色を設定します。 |
| $backing-stroke-thickness | Number | null | 裏張りのアウトラインのストロークの太さを設定します。 |
| $font-brush | Color | null | ラベルのフォントに使用する色を設定します。 |
| $minor-tick-stroke-thickness | Number | null | 副目盛を描画する際に使用するストロークの太さを設定します。 |
| $needle-breadth | Number | null | 針の幅を設定します。 |
| $needle-brush | Color | null | 針要素の色を設定します。 |
| $needle-inner-base-width | Number | null | 針の内部ベースの幅を設定します。 |
| $needle-inner-point-width | Number | null | 針の内部ポイントの幅を設定します。 |
| $needle-outer-base-width | Number | null | 針の外部ベースの幅を設定します。 |
| $needle-outer-point-width | Number | null | 針の外部ポイントの幅を設定します。 |
| $needle-outline | Color | null | 針要素のアウトラインを描画する色を設定します。 |
| $needle-stroke-thickness | Number | null | 単一の実際値の要素を描画するときに使用するストロークの太さを設定します。 |
| $range-brushes | List | null | リニア ゲージ範囲のパレットとして使用される色のコレクションを設定します。 |
| $range-outlines | List | null | リニア ゲージ アウトラインのパレットとして使用される色のコレクションを設定します。 |
| $scale-brush | Color | null | リニア ゲージのスケールを塗りつぶすために使用する色を設定します。 |
| $scale-outline | Color | null | スケールのアウトラインに使用する色を設定します。 |
| $scale-stroke-thickness | Number | null | スケールのアウトラインのストロークの太さを設定します。 |
| $tick-brush | Color | null | 主目盛に使用する色を設定します。 |
| $tick-stroke-thickness | Number | null | 目盛を描画する際に使用するストロークの太さを設定します。 |
$custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));// css-vars ミックスインへテーマを渡します。@include css-vars($custom-gauge-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $target | Map | 'angular' | テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。 |
| $width | Map | null | ゲージの幅 - ピクセル、文字列 (px) またはパーセンテージ (%)。 |
| $height | Map | null | ゲージの高さ - ピクセル、文字列 (px) またはパーセンテージ (%)。 |
| $backing-brush | Color | null | リニア ゲージの裏張りを塗りつぶすために使用する色を設定します。 |
| $backing-outline | Color | null | 裏張りのアウトラインに使用する色を設定します。 |
| $backing-stroke-thickness | Number | null | 裏張りのアウトラインのストロークの太さを設定します。 |
| $font-brush | Color | null | ラベルのフォントに使用する色を設定します。 |
| $minor-tick-stroke-thickness | Number | null | 副目盛を描画する際に使用するストロークの太さを設定します。 |
| $needle-brush | Color | null | 針要素の色を設定します。 |
| $needle-outline | Color | null | 針要素のアウトラインを描画する色を設定します。 |
| $needle-stroke-thickness | Number | null | 単一の実際値の要素を描画するときに使用するストロークの太さを設定します。 |
| $range-brushes | List | null | リニア ゲージ範囲のパレットとして使用される色のコレクションを設定します。 |
| $range-outlines | List | null | リニア ゲージ アウトラインのパレットとして使用される色のコレクションを設定します。 |
| $scale-brush | Color | null | リニア ゲージのスケールを塗りつぶすために使用する色を設定します。 |
| $tick-brush | Color | null | 主目盛に使用する色を設定します。 |
| $tick-stroke-thickness | Number | null | 目盛を描画する際に使用するストロークの太さを設定します。 |
| $needle-pivot-brush | Color | null | 針のピボット ポイントの色を設定します。 |
| $needle-pivot-outline | Color | null | 針のピボット ポイントのアウトラインの色を設定します。 |
$my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));// css-vars ミックスインへテーマを渡します。@include css-vars($my-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $backing-brush | Color | null | ブレット グラフのバッキングを塗りつぶすために使用するブラシを設定します。 |
| $backing-outline | Color | null | バッキングのアウトラインに使用するブラシを設定します。 |
| $backing-stroke-thickness | Number | null | 裏張りのアウトラインのストロークの太さを設定します。 |
| $font-brush | Color | null | ラベルのフォントに使用するブラシを設定します。 |
| $minor-tick-brush | Color | null | 副目盛に使用するブラシを設定します。 |
| $minor-tick-thickness | Number | null | 副目盛を描画する際に使用するストロークの太さ。 |
| $range-brushes | List | null | ブレット グラフ範囲のパレットとして使用されるブラシのコレクションを設定します。 |
| $range-outlines | List | null | ブレット グラフ アウトラインのパレットとして使用されるブラシのコレクションを設定します。 |
| $scale-background-brush | Color | null | スケールの背景ブラシを設定します。 |
| $scale-background-outline | Color | null | スケールの背景アウトラインを設定します。 |
| $scale-background-thickness | Number | null | スケールの背景アウトラインの太さを設定します。 |
| $target-value-breadth | Number | null | ターゲット値要素の幅を設定します。 |
| $target-value-brush | Color | null | 比較マーカーの塗りつぶしを描画する際に使用するブラシを設定します。 |
| $target-value-outline | Color | null | ターゲット値のアウトラインを描画する際に使用するブラシを設定します。 |
| $target-value-thickness | Number | null | ターゲット値バーのアウトラインのストローク幅を設定します。 |
| $tick-brush | Color | null | 主目盛に使用するブラシを設定します。 |
| $tick-stroke-thickness | Number | null | 目盛を描画する際に使用するストロークの太さを設定します。 |
| $value-brush | Color | null | 実際の値要素に使用するブラシを設定します。 |
| $value-outline | Color | null | 実際の値要素のアウトラインに使用するブラシを設定します。 |
| $value-stroke-thickness | Number | null | 単一の実際値の要素を描画するときに使用するストロークの太さを設定します。 |
$my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));// css-vars ミックスインへテーマを渡します。@include css-vars($my-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $brushes | List | series | 自動的に割り当てられるシリーズの色から選択されるパレットを定義します。 |
| $outlines | List | series | 自動的に割り当てられるシリーズのアウトラインの色から選択されるパレットを定義します。 |
| $label-extent | Number | null | スライスの端からラベルをオフセットするピクセル量を設定します。 |
| $label-inner-color | Color | null | 円チャート内に描画されるラベルの色を設定します。 |
| $label-outer-color | Color | null | 円チャートの外に描画されるラベルの色を設定します。 |
| $labels-position | String | null | チャート ラベルの位置を設定します。有効な値: 'none'、'center'、'insideEnd'、'outsideEnd', および 'bestFit'。 |
| $leader-line-margin | Number | null | ラベルおよびその引き出し線の終了の間のマージンを設定します。 |
| $leader-line-type | String | null | 外部の終了ラベルのために使用される引き出し線のタイプを設定します。有効な値: 'straight'、'spline'、および 'arc'。 |
| $leader-line-visibility | String | null | 引き出し線が表示されるかどうかを設定します。有効な値: 'visible' および 'collapsed'。 |
| $radius-factor | Number | null | チャートの半径のスケール率を設定します。0 と 1 の間の値。 |
$my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));// css-vars ミックスインへテーマを渡します。@include css-vars($my-chart-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $margin | List | null | チャート コンテンツのマージン (top、right、bottom および left) を設定します。 |
| $title-alignment | Color | null | コントロールの左右端に相対するタイトルの配置を決定する水平配置を設定します。 |
| $title-text-color | Color | null | チャート タイトルの色を設定します。 |
| $title-margin | List | null | チャート タイトルのマージン (top、right、bottom および left) を設定します。 |
| $subtitle-alignment | String | null | コントロールの左右端に相対するサブタイトルの配置を決定する水平配置を設定します。 |
| $subtitle-text-color | Color | null | チャート サブタイトルの色を設定します。 |
| $subtitle-margin | List | null | チャート サブタイトルのマージン (top、right、bottom および left) を設定します。 |
| $brushes | List | null | 自動的に割り当てられるシリーズの色から選択されるパレットを定義します。 |
| $marker-brushes | List | null | データ ポイント マーカーの塗りつぶし領域を描画するために使用されるブラシのパレットを設定します。 |
| $outlines | List | null | チャート シリーズのアウトラインに使用するブラシのパレットを設定します。 |
| $marker-outlines | List | null | データ ポイント マーカーのアウトラインのを描画するために使用されるブラシのパレットを設定します。 |
| $thickness | Number | null | このチャートのすべてのシリーズの太さを設定します。 |
| $trend-line-brushes | List | null | このチャートでトレンドラインの色に使用されるブラシのパレットを設定します。 |
| $trend-line-thickness | Number | null | このチャートのトレンドラインの太さを設定します。このプロパティはポイント、折れ線、スプライン、およびバブルのチャート型のみに適用できます。 |
| $x-axis-label-margin | List | null | X 軸のラベルのマージンを設定します。 |
| $x-axis-label-text-color | Color | null | X 軸のラベルの色を設定します。 |
| $x-axis-label-vertical-alignment | String | null | X 軸ラベルの垂直方向の配置を設定します。 |
| $x-axis-major-stroke | Color | null | X 軸の主グリッド線に適用する色を設定します。 |
| $x-axis-major-stroke-thickness | Number | null | X 軸の主グリッド線に適用する太さを設定します。 |
| $x-axis-minor-stroke | Color | null | X 軸の副グリッド線に適用する色を設定します。 |
| $x-axis-minor-stroke-thickness | Number | null | X 軸の副グリッド線に適用する太さを設定します。 |
| $x-axis-strip | Color | null | X 軸の背景の縞模様に適用する色を設定します。 |
| $x-axis-stroke | Color | null | X 軸線に適用する色を設定します。 |
| $x-axis-stroke-thickness | Number | null | X 軸線に適用する太さを設定します。 |
| $x-axis-title-alignment | String | null | X 軸タイトルの水平方向の配置を設定します。 |
| $x-axis-title-color | Color | null | X 軸のタイトルの色を設定します。 |
| $x-axis-title-margin | List | null | X 軸のタイトルの周りのマージンを設定します。 |
| $y-axis-label-margin | List | null | Y 軸のラベルのマージンを設定します。 |
| $y-axis-label-text-color | Color | null | Y 軸のラベルの色を設定します。 |
| $y-axis-label-vertical-alignment | String | null | Y 軸ラベルの垂直方向の配置を設定します。 |
| $y-axis-major-stroke | Color | null | Y 軸の主グリッド線に適用する色を設定します。 |
| $y-axis-major-stroke-thickness | Number | null | Y 軸の主グリッド線に適用する太さを設定します。 |
| $y-axis-minor-stroke | Color | null | Y 軸の副グリッド線に適用する色を設定します。 |
| $y-axis-minor-stroke-thickness | Number | null | Y 軸の副グリッド線に適用する太さを設定します。 |
| $y-axis-strip | Color | null | Y 軸の背景の縞模様に適用する色を設定します。 |
| $y-axis-stroke | Color | null | Y 軸線に適用する色を設定します。 |
| $y-axis-stroke-thickness | Number | null | Y 軸線に適用する太さを設定します。 |
| $y-axis-title-alignment | String | null | Y 軸タイトルの水平方向の配置を設定します。 |
| $y-axis-title-color | Color | null | Y 軸のタイトルの色を設定します。 |
| $y-axis-title-margin | List | null | Y 軸のタイトルの周りのマージンを設定します。 |
$my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));// css-vars ミックスインへテーマを渡します。@include css-vars($my-sparkline-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $brush | Color | null | スパークライン ブラシを設定します。 |
| $line-thickness | Number | null | スパークラインの線の太さを設定します。 |
| $marker-brush | Color | null | スパークラインのマーカー ブラシを設定します。 |
| $marker-size | Color | null | スパークラインのマーカー サイズを設定します。 |
| $first-marker-brush | Color | null | スパークラインの始値マーカー ブラシを設定します。 |
| $first-marker-size | Number | null | スパークラインの始値マーカー サイズを設定します。 |
| $last-marker-brush | Color | null | スパークラインの終値マーカー ブラシを設定します。 |
| $last-marker-size | Number | null | スパークラインの終値マーカー サイズを設定します。 |
| $low-marker-brush | Color | null | スパークラインの最小値マーカー ブラシを設定します。 |
| $low-marker-size | Number | null | スパークラインの最小値マーカー サイズを設定します。 |
| $high-marker-brush | Color | null | スパークラインの最大値マーカー ブラシを設定します。 |
| $high-marker-size | Number | null | スパークラインの最大値マーカー サイズを設定します。 |
| $negative-brush | Color | null | スパークラインの負値ブラシを設定します。 |
| $negative-marker-brush | Color | null | スパークラインの負値マーカー ブラシを設定します。 |
| $negative * | Number | - | marker-size [null] - スパークラインの負値マーカーのサイズを取得または設定します。 |
| $trend-line-brush | Color | null | スパークラインのトレンドライン マーカー ブラシを設定します。 |
| $trend-line-thickness | Color | null | スパークライン トレンドラインの太さを設定します。 |
| $horizontal-axis-brush | Color | null | スパークラインの横軸線ブラシを設定します。 |
| $vertical-axis-brush | Color | null | スパークラインの縦軸線ブラシを設定します。 |
| $normal-range-fill | Color | null | スパークラインの標準範囲ブラシを設定します。 |
Action Strip テーマ プライマリ トークン: - `$actions-background` - アクションの背景色。 派生色はコントラストに合わせて自動計算されます。
Action Strip でアイコンの色と背景を変更します。
$my-action-strip-theme: action-strip-theme($background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-action-strip-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $icon-color | Color | null | アクション アイコンに使用される色。actions-background から自動導出されます。 |
| $background | Color | null | Action Strip コンポーネントのコンテンツの背景に使用される色。 |
| $actions-background | Color | null | アクションの背景に使用される色。プライマリ - アイコンの色を導出します。 |
| $delete-action | Color | null | Action Strip コンポーネントの削除アイコンに使用される色。 |
| $actions-border-radius | List | null | Action Strip コンポーネント内のアクション コンテナーに使用される境界線の半径。 |
Avatar テーマ プライマリ トークン: - `$background` - アバターの背景色。 派生色はコントラストに合わせて自動計算されます。
Icon のアバターで アイコンの色と背景を変更します。
$my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-avatar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | アバターの背景色。プライマリ - color、icon-color を派生します。 |
| $color | Color | null | アバターで使用されるテキストの色。background から自動導出されます。 |
| $icon-color | Color | null | アバターに使用されるアイコンの色。background から自動導出されます。 |
| $border-radius | Number | null | アバターで使用される境界線の半径。 |
| $size | Number | null | アバターのサイズ。 |
Badge テーマ プライマリ トークン: - `$background-color` - バッジの背景色。 `$background-color` を設定するだけで、適切なテキスト/アイコンのコントラストを持つ完全なバッジ テーマが作成されます。
バッジのアイコンとテキストの色を変更します。
$my-badge-theme: badge-theme($icon-color: black, $background-color: white);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-badge-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $icon-color | Color | null | 使用されるアイコンの色。background-color から自動導出されます。 |
| $text-color | Color | null | 使用されるテキストの色。background-color から自動導出されます。 |
| $border-color | Color | null | 境界線の色。 |
| $background-color | Color | null | 使用される背景色。プライマリ - icon-color と text-color を導出します。 |
| $shadow | box-shadow | null | バッジに使用する影を設定します。 |
| $border-radius | Number | null | バッジ コンポーネントに使用される境界線の半径の割合。 |
| $size | Number | null | バッジ コンポーネントのサイズ。 |
| $dot-size | Number | null | ドット型バッジのサイズ。 |
Banner テーマ プライマリ トークン: - `$banner-background` - バナーの背景色。 派生色はコントラストに合わせて自動計算されます。
バナーの背景を変更します。
$my-banner-theme: banner-theme($banner-background: #000);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-banner-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $banner-background | Color | null | バナーの背景に使用される色。プライマリ - message と illustration の色を導出します。 |
| $banner-message-color | Color | null | バナーのラベルに使用される色。banner-background から自動導出されます。 |
| $banner-border-color | Color | null | バナーの境界線に使用される色。 |
| $banner-illustration-color | Color | null | バナーのイラストに使用される色。banner-background から自動導出されます。 |
| $border-radius | Number | null | バナーの境界線の半径。 |
Bottom Navigation テーマ プライマリ トークン: - `$background` - バーの背景色。 - `$label-color` または `$icon-color` - アイドル状態の色。どちらか一方が他方を派生し、さらに無効な色も導出します。 - `$label-selected-color` または `$icon-selected-color` - 選択された状態の色。どちらかが一方を導出します。 派生色はコントラストに合わせて自動計算されます。
カスタム背景色を設定します。
$my-bottom-nav-theme: bottom-nav-theme($background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-bottom-nav-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | バーに使用される背景色。プライマリ - label-color、icon-color を導出します。 |
| $label-color | Color | null | アイドル状態に使用されるラベルの色。background から自動導出されます。設定されていない場合は icon-color を導出します。 |
| $icon-color | Color | null | アイドル状態に使用されるアイコンの色。設定されていない場合は、label-color から自動導出されます。 |
| $label-selected-color | Color | null | 選択状態に使用されるラベルの色。設定されていない場合は、icon-selected-color を導出します。 |
| $icon-selected-color | Color | null | 選択状態に使用されるアイコンの色。設定されていない場合は label-selected-color から自動導出されます。 |
| $icon-disabled-color | Color | null | アイコンの無効な色。設定されていない場合は label-disabled-color から自動導出されます。 |
| $label-disabled-color | Color | null | ラベルの無効な色。label-color から自動導出されます。 |
| $border-color | Color | null | 下部のナビゲーションの境界線の色。 |
| $shadow | box-shadow | null | バーに使用する影を設定します。 |
Button Group テーマ プライマリ トークン: - `$item-background` - 基本項目の背景。 - `$item-selected-background` - 選択された項目の背景。 派生色はコントラストに合わせて自動計算されます。
背景、テキストおよび境界の色を変更します。
$my-button-group-theme: button-group-theme( $item-text-color: white, $item-background: rgba(0, 0, 0, .8), $item-border-color: #dadada);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-group-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $shadow | box-shadow | null | ボタン グループに適用される影。 |
| $item-text-color | Color | null | ボタン グループ項目のテキストの色。item-background から自動的に導出されます。 |
| $item-icon-color | color | null | ボタン グループ項目のアイコンの色。item-text-color から自動的に導出されます。 |
| $item-background | Color | null | ボタン グループ項目の背景色。プライマリ - すべての状態の色を導出します。 |
| $item-border-color | Color | null | ボタン グループ項目の間の境界色。item-background から自動的に導出されます。 |
| $item-hover-text-color | Color | null | ボタン グループ項目のホバーテキストの色。item-hover-background から自動導出されます。 |
| $item-hover-icon-color | Color | null | ボタン グループ項目のホバー アイコンの色。item-hover-text-color から自動導出されます。 |
| $item-hover-background | Color | null | ボタン グループ項目のホバー背景色。item-background から自動的に導出されます。 |
| $item-hover-border-color | Color | null | ボタン グループ項目間のホバー境界線の色。item-border-color から自動導出されます。 |
| $item-focused-text-color | Color | null | ボタングループ項目のフォーカスされているテキストの色。item-focused-background から自動導出されます。 |
| $item-focused-background | Color | null | ボタン グループ項目のフォーカス背景色。item-hover-background から自動導出されます。 |
| $item-focused-border-color | Color | null | ボタン グループの項目のフォーカス境界線の色。item-border-color から自動導出されます。 |
| $item-focused-hover-background | Color | null | ボタン グループ項目のフォーカスおよびホバー背景色。item-focused-background から自動導出されます。 |
| $idle-shadow-color | Color | null | フォーカス状態にあるボタン グループ項目のアウトラインの色。item-background または selected-shadow-color から自動導出されます。 |
| $selected-shadow-color | Color | null | フォーカス状態にある/選択されているボタン グループ項目のアウトラインの色。idle-shadow-color から自動導出されます。 |
| $disabled-text-color | Color | null | ボタン グループの無効にされた項目のためのテキスト/アイコン色。disabled-background-color から自動導出されます。 |
| $disabled-background-color | Color | null | ボタン グループの無効にされた項目のための背景色。item-background から自動的に導出されます。 |
| $item-disabled-border | Color | null | ボタン グループの無効にされた項目のための境界線の色。item-border-color から自動導出されます。 |
| $item-selected-text-color | Color | null | ボタン グループの選択された項目のためのテキスト/アイコン色。item-selected-background から自動導出されます。 |
| $item-selected-icon-color | Color | null | ボタン グループの選択された項目のためのアイコンの色。item-selected-text-color から自動導出されます。 |
| $item-selected-background | Color | null | ボタン グループの選択された項目のための背景色。選択された状態の プライマリ。item-background から自動的に派生されます。 |
| $item-selected-border-color | Color | null | ボタン グループの選択された項目の境界の色。item-border-color から自動導出されます。 |
| $item-selected-hover-text-color | Color | null | ボタン グループ内のホバー状態で選択されている項目のテキストの色。item-selected-hover-background から自動導出されます。 |
| $item-selected-hover-icon-color | Color | null | ボタン グループ内のホバー状態で選択されている項目のアイコンの色。item-selected-hover-text-color から自動導出されます。 |
| $item-selected-hover-background | Color | null | ボタン グループ内のホバー状態で選択された項目の背景色。item-selected-background から自動導出されます。 |
| $item-selected-hover-border-color | Color | null | ボタン グループ内のホバー状態で選択されている項目の境界線の色。item-border-color から自動導出されます。 |
| $item-selected-focus-background | Color | null | ボタン グループ内のフォーカス状態で選択された項目の背景色。item-selected-background から自動導出されます。 |
| $item-selected-focus-hover-background | Color | null | ボタン グループ内のフォーカス状態およびホバー状態で選択された項目の背景色。item-selected-hover-background から自動導出されます。 |
| $disabled-selected-text-color | Color | null | ボタン グループで選択された項目の無効なテキストの色。disabled-text-color から自動導出されます。 |
| $disabled-selected-icon-color | Color | null | ボタン グループで選択された項目の無効なアイコンの色。disabled-selected-text-color から自動導出されます。 |
| $disabled-selected-background | Color | null | ボタン グループで選択された項目の無効な背景色。item-selected-background から自動導出されます。 |
| $disabled-selected-border-color | Color | null | ボタン グループから選択された項目の無効な境界線の色。item-border-color から自動導出されます。 |
| $border-radius | List | null | ボタン グループ コンポーネントに使用される境界線の半径。 |
Button テーマ プライマリ トークン: - `$background` - メイン ボタンの背景。 - `$hover-background` - ホバー状態の背景。 - `$focus-background` - フォーカス状態の背景。 `$background` のみを設定すると、適切なコントラストのボタンが作成されます。
Use flat-button-theme(), contained-button-theme(), outlined-button-theme(), or fab-button-theme() instead.
contained ボタンのテキストと背景色を変更します。
$my-button-theme: button-theme( $foreground: white, $background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ボタンの背景色。プライマリ - foreground と icon-color を導出します。 |
| $foreground | Color | null | ボタンのテキストの色。background から自動導出されます。 |
| $icon-color | Color | null | ボタンのアイコンの色。background から自動導出されます。 |
| $icon-color-hover | Color | null | ホバー時のボタンのアイコンの色。hover-foreground から自動導出されます。 |
| $hover-background | Color | null | ボタンのホバー背景色。 |
| $hover-foreground | Color | null | ボタンのホバー テキストの色。hover-background から自動的に派生されます。 |
| $focus-background | Color | null | ボタンのフォーカス背景色。 |
| $focus-foreground | Color | null | ボタンのフォーカス テキストの色。focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | ボタンのフォーカス時のホバー状態の背景色。 |
| $focus-hover-foreground | Color | null | ボタンのフォーカス時のホバー状態のテキストの色。focus-hover-background から自動導出されます。 |
| $focus-visible-background | Color | null | ボタンのフォーカス表示の背景色。focus-background から自動導出されます。 |
| $focus-visible-foreground | Color | null | ボタンのフォーカス表示テキストの色。focus-visible-background から自動導出されます。 |
| $active-background | Color | null | ボタンのアクティブな背景。 |
| $active-foreground | Color | null | ボタンのアクティブなテキストの色。 |
| $border-radius | List | null | ボタンの境界線の半径。 |
| $border-color | Color | null | ボタンの境界線の色。 |
| $hover-border-color | Color | null | ボタンのホバー境界線の色。 |
| $focus-border-color | Color | null | ボタンのフォーカス境界線の色。 |
| $focus-visible-border-color | Color | null | ボタンのフォーカス表示境界線の色。focus-border-color から自動導出されます。 |
| $active-border-color | Color | null | ボタンのアクティブな境界線の色。 |
| $shadow-color | Color | null | ボタンの影の色。 |
| $resting-shadow | Color | null | アイドル状態のボタンの影。 |
| $hover-shadow | Color | null | ホバー状態のボタンの影。 |
| $focus-shadow | Color | null | フォーカス状態のボタンの影。 |
| $active-shadow | Color | null | アクティブ状態のボタンの影。 |
| $disabled-background | Color | null | ボタンの無効な背景色。 |
| $disabled-foreground | Color | null | ボタンの無効なテキストの色。 |
| $disabled-icon-color | Color | null | 無効になっているボタンのアイコンの色。 |
| $disabled-border-color | Color | null | ボタンの無効な境界線の色。 |
Contained Button テーマ プライマリ トークン: - `$background` - ボタンの背景色。 - `$foreground` - ボタンのテキストの色。 派生色はコントラストに合わせて自動計算されます。
contained ボタンのテキストと背景色を変更します。
$my-button-theme: contained-button-theme( $foreground: white, $background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ボタンの背景色。プライマリ - foreground、icon-color、hover-background、focus-background、active-background を派生します。 |
| $foreground | Color | null | ボタンのテキストの色。background から自動導出されます。プライマリ - foreground 継承用。 |
| $icon-color | Color | null | ボタンのアイコンの色。background から自動導出されます。 |
| $icon-color-hover | Color | null | ホバー時のボタンのアイコンの色。icon-color または hover-background から自動導出されます。 |
| $hover-background | Color | null | ボタンのホバー背景色。background から自動導出されます。 |
| $hover-foreground | Color | null | ボタンのホバー テキストの色。foreground または hover-background から自動導出されます。 |
| $focus-background | Color | null | ボタンのフォーカス背景色。background または focus-hover-background から自動導出されます。 |
| $focus-foreground | Color | null | ボタンのフォーカス テキストの色。foreground または focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス時のホバー状態の背景色。hover-background から自動的に派生されます。 |
| $focus-hover-foreground | Color | null | フォーカス時のホバー状態のテキストの色。foreground または focus-hover-background から自動導出されます。 |
| $focus-visible-background | Color | null | focus-visible の背景色。focus-background または background から自動導出されます。 |
| $focus-visible-foreground | Color | null | focus-visible のテキストの色。foreground または focus-visible-background から自動導出されます。 |
| $active-background | Color | null | ボタンのアクティブな背景。background、focus-background、または hover-background から自動導出されます。 |
| $active-foreground | Color | null | ボタンのアクティブなテキストの色。foreground または active-background から自動導出されます。 |
| $border-radius | List | null | ボタンの境界線の半径。 |
| $border-color | Color | null | ボタンの境界線の色。 |
| $hover-border-color | Color | null | ボタンのホバー境界線の色。 |
| $focus-border-color | Color | null | ボタンのフォーカス境界線の色。 |
| $focus-visible-border-color | Color | null | focus-visible の境界線の色。focus-visible-foreground (fluent) から自動導出します。 |
| $active-border-color | Color | null | ボタンのアクティブな境界線の色。 |
| $shadow-color | Color | null | ボタンの影の色。focus-visible-background (bootstrap/indigo) から自動導出されます。 |
| $resting-shadow | Color | null | アイドル状態のボタンの影。 |
| $hover-shadow | Color | null | ホバー状態のボタンの影。 |
| $focus-shadow | Color | null | フォーカス状態のボタンの影。 |
| $active-shadow | Color | null | フォーカス状態のボタンの影。 |
| $disabled-background | Color | null | 無効の背景色。background (bootstrap/indigo) から自動導出されます。 |
| $disabled-foreground | Color | null | 無効なテキストの色。disabled-background から自動導出されます。 |
| $disabled-icon-color | Color | null | 無効のアイコン色。disabled-foreground から自動導出されます。 |
| $disabled-border-color | Color | null | ボタンの無効な境界線の色。 |
FAB Button テーマ プライマリ トークン: - `$background` - ボタンの背景色。 - `$foreground` - ボタンのテキストの色。状態 foreground 色のフォールバックとして使用されます。 - `$icon-color` - ボタンのアイコンの色。icon-color-hover のフォールバックとして使用されます。 派生色はコントラストに合わせて自動計算されます。
fab ボタンのテキストと背景色を変更します。
$my-button-theme: fab-button-theme( $foreground: white, $background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ボタンの背景色。プライマリ - foreground、icon-color、hover-background、focus-background、active-background を派生します。 |
| $foreground | Color | null | ボタンのテキストの色。background から自動導出されます。 |
| $icon-color | Color | null | ボタンのアイコンの色。background から自動導出されます。 |
| $icon-color-hover | Color | null | ホバー時のボタンのアイコンの色。icon-color または hover-background から自動導出されます。 |
| $hover-background | Color | null | ホバー時の背景色。background から自動導出されます。 |
| $hover-foreground | Color | null | ホバー時のテキストの色。foreground または hover-background から自動導出されます。 |
| $focus-background | Color | null | フォーカス時の背景色。background または focus-hover-background から自動導出されます。 |
| $focus-foreground | Color | null | フォーカス時のテキストの色。foreground または focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス時のホバー状態の背景色。hover-background から自動的に派生されます。 |
| $focus-hover-foreground | Color | null | フォーカス時のホバー状態のテキストの色。foreground または focus-hover-background から自動導出されます。 |
| $focus-visible-background | Color | null | focus-visible の背景色。focus-background または background から自動導出されます。 |
| $focus-visible-foreground | Color | null | focus-visible のテキストの色。focus-visible-background から自動導出されます。 |
| $active-background | Color | null | アクティブな背景。background、focus-background、または hover-background から自動導出されます。 |
| $active-foreground | Color | null | アクティブなテキストの色。active-background から自動的に派生されます。 |
| $border-radius | List | null | ボタンの境界線の半径。 |
| $border-color | Color | null | ボタンの境界線の色。 |
| $hover-border-color | Color | null | ボタンのホバー境界線の色。 |
| $focus-border-color | Color | null | ボタンのフォーカス境界線の色。 |
| $focus-visible-border-color | Color | null | focus-visible の境界線の色。focus-visible-foreground (fluent) から自動導出します。 |
| $active-border-color | Color | null | ボタンのアクティブな境界線の色。 |
| $shadow-color | Color | null | 影の色。focus-visible-background (bootstrap/indigo) から自動導出されます。 |
| $resting-shadow | Color | null | アイドル状態のボタンの影。 |
| $hover-shadow | Color | null | ホバー状態のボタンの影。 |
| $focus-shadow | Color | null | フォーカス状態のボタンの影。 |
| $active-shadow | Color | null | フォーカス状態のボタンの影。 |
| $disabled-background | Color | null | 無効の背景色。background (bootstrap/indigo) から自動導出されます。 |
| $disabled-foreground | Color | null | 無効なテキストの色。disabled-background から自動導出されます。 |
| $disabled-icon-color | Color | null | 無効のアイコン色。disabled-foreground または disabled-background から自動導出されます。 |
| $disabled-border-color | Color | null | ボタンの無効な境界線の色。 |
Flat Button テーマ プライマリ トークン: - `$foreground` - ボタンのテキストの色。 - `$hover-background` - ホバー時の背景色。 - `$focus-background` - フォーカス時の背景色。 - `$active-background` - アクティブな背景色。 フラット ボタンの場合、foreground 色がプライマリ トークンになります。
flat ボタンのテキストと背景色を変更します。
$my-button-theme: flat-button-theme( $foreground: black,);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ボタンの背景色。 |
| $foreground | Color | null | ボタンのテキストの色。プライマリ - hover/focus/active の background と foreground を導出します。 |
| $icon-color | Color | null | ボタンのアイコンの色。 |
| $icon-color-hover | Color | null | ホバー時のボタンのアイコンの色。hover-foreground から自動導出されます。 |
| $hover-background | Color | null | ボタンのホバー背景色。プライマリ - hover-foreground を導出します。foreground から自動導出されます。 |
| $hover-foreground | Color | null | ボタンのホバー テキストの色。hover-background から自動的に派生されます。 |
| $focus-background | Color | null | ボタンのフォーカス背景色。プライマリ - focus-foreground を導出します。foreground から自動導出されます。 |
| $focus-foreground | Color | null | ボタンのフォーカス テキストの色。focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス時のホバー状態の背景色。foreground から自動導出されます。 |
| $focus-hover-foreground | Color | null | フォーカス時のホバー状態のテキストの色。focus-hover-background から自動導出されます。 |
| $focus-visible-background | Color | null | focus-visible の背景色。focus-background または foreground から自動導出されます。 |
| $focus-visible-foreground | Color | null | focus-visible のテキストの色。focus-visible-background から自動導出されます。 |
| $active-background | Color | null | ボタンのアクティブな背景。foreground から自動導出されます。 |
| $active-foreground | Color | null | ボタンのアクティブなテキストの色。active-background から自動的に派生されます。 |
| $border-radius | List | null | ボタンの境界線の半径。 |
| $border-color | Color | null | ボタンの境界線の色。 |
| $hover-border-color | Color | null | ボタンのホバー境界線の色。 |
| $focus-border-color | Color | null | ボタンのフォーカス境界線の色。 |
| $focus-visible-border-color | Color | null | focus-visible の境界線の色。focus-border-color または focus-visible-foreground から自動導出されます。 |
| $active-border-color | Color | null | ボタンのアクティブな境界線の色。 |
| $shadow-color | Color | null | ボタンの影の色。focus-visible-foreground から自動導出されます。 |
| $disabled-background | Color | null | ボタンの無効な背景色。 |
| $disabled-foreground | Color | null | ボタンの無効なテキストの色。foreground (bootstrap/indigo) から自動導出されます。 |
| $disabled-icon-color | Color | null | 無効になっているボタンのアイコンの色。disabled-foreground から自動導出されます。 |
| $disabled-border-color | Color | null | ボタンの無効な境界線の色。 |
Outlined Button テーマ プライマリ トークン: - `$foreground` - ボタンのテキストの色。 - `$hover-background` - ホバー時の背景色。 - `$focus-background` - フォーカス時の背景色。 - `$active-background` - アクティブな背景色。 アウトライン ボタンの場合、foreground 色がプライマリ トークンになります。
outlined ボタンのテキストと背景色を変更します。
$my-button-theme: outlined-button-theme( $foreground: black,);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-button-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ボタンの背景色。 |
| $foreground | Color | null | ボタンのテキストの色。プライマリ - hover/focus/active の background、foreground、border を導出します。 |
| $icon-color | Color | null | ボタンのアイコンの色。 |
| $icon-color-hover | Color | null | ホバー時のボタンのアイコンの色。hover-foreground から自動導出されます。 |
| $hover-background | Color | null | ホバー時の背景色。プライマリ - hover-foreground を導出します。foreground から自動導出されます。 |
| $hover-foreground | Color | null | ホバー時のテキストの色。hover-background から自動的に派生されます。 |
| $focus-background | Color | null | フォーカス時の背景色。プライマリ - focus-foreground を導出します。foreground から自動導出されます。 |
| $focus-foreground | Color | null | フォーカス時のテキストの色。focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス時のホバー状態の背景色。foreground または hover-background から自動導出されます。 |
| $focus-hover-foreground | Color | null | フォーカス時のホバー状態のテキストの色。focus-hover-background から自動導出されます。 |
| $focus-visible-background | Color | null | focus-visible の背景色。focus-background または hover-background から自動導出されます。 |
| $focus-visible-foreground | Color | null | focus-visible のテキストの色。focus-visible-background または foreground から自動導出されます。 |
| $active-background | Color | null | ボタンのアクティブな背景。foreground から自動導出されます。 |
| $active-foreground | Color | null | アクティブなテキストの色。active-background から自動的に派生されます。 |
| $border-radius | List | null | ボタンの境界線の半径。 |
| $border-color | Color | null | ボタンの境界線の色。foreground から自動導出されます。 |
| $hover-border-color | Color | null | ホバー時の境界線の色。hover-foreground または hover-background から自動導出されます。 |
| $focus-border-color | Color | null | フォーカス境界線の色。focus-foreground または focus-background から自動導出されます。 |
| $focus-visible-border-color | Color | null | focus-visible の境界線の色。focus-border-color または focus-visible-background から自動導出されます。 |
| $active-border-color | Color | null | アクティブな境界線の色。active-foreground または active-background から自動導出されます。 |
| $shadow-color | Color | null | ボタンの影の色。focus-visible-foreground または focus-visible-background から自動導出されます。 |
| $disabled-background | Color | null | ボタンの無効な背景色。 |
| $disabled-foreground | Color | null | 無効なテキストの色。foreground (bootstrap) から自動導出されます。 |
| $disabled-icon-color | Color | null | 無効のアイコン色。disabled-foreground から自動導出されます。 |
| $disabled-border-color | Color | null | 無効の境界線の色。disabled-foreground (bootstrap) から自動導出されます。 |
Calendar テーマ プライマリ トークン: - `$header-background` - 主なアクセント色。 - `$content-background` - カレンダー本体の背景。 テキストとアイコンの色はコントラストに合わせて自動的に計算されます。
ヘッダーとコンテンツの背景色を変更します。
$my-calendar-theme: calendar-theme( $header-background: purple, $content-background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-calendar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $size | Number | null | 日、月、年ビューのサイズ。 |
| $inner-size | Number | null | カレンダー要素の内部サイズ。 |
| $weekday-color | Color | null | 曜日ラベルの色。content-background から自動導出されます。 |
| $actions-divider-color | Color | null | 日付ピッカー]アクションの区切り線の色。 |
| $border-radius | List | null | カレンダー コンテナーの境界線の半径。 |
| $content-background | Color | null | カレンダーの背景色。プライマリ - content-foreground、inactive-color、date-hover の色、week-number の色を導出します。 |
| $border-color | Color | null | カレンダー コンテナーの境界線の色。 |
| $header-background | Color | null | ヘッダーの背景色。プライマリ - header-foreground とほとんどのアクセント/選択の色を導出します。 |
| $header-foreground | Color | null | ヘッダーの前景色。header-background から自動導出されます。 |
| $picker-foreground | Color | null | カレンダー ピッカーの前景。picker-background から自動導出されます。 |
| $picker-background | Color | null | カレンダー ピッカーの背景。 |
| $picker-hover-foreground | Color | null | :hover 時のカレンダー ピッカーの前景。header-background から自動導出されます。 |
| $picker-focus-foreground | Color | null | :focus 時のカレンダー ピッカーの前景。picker-hover-foreground から自動導出されます。 |
| $navigation-color | Color | null | 月移動ナビゲーションのアイコンの色。picker-background から自動導出されます。 |
| $navigation-hover-color | Color | null | :hover 時のナビゲーション アイコンの色。picker-hover-foreground から自動導出されます。 |
| $navigation-focus-color | Color | null | :focus 時のナビゲーション アイコンの色。navigation-hover-color から自動導出されます。 |
| $ym-border-radius | List | null | 年/月ビューの境界線の半径。 |
| $ym-hover-foreground | Color | null | :hover 時の年/月の前景。ym-hover-background から自動導出されます。 |
| $ym-hover-background | Color | null | :hover 時の年/月の背景。date-hover-background から自動導出されます。 |
| $ym-current-outline-color | Color | null | 現在の年/月のアウトラインの色。date-current-border-color から自動導出されます。 |
| $ym-current-outline-hover-color | Color | null | :hover 時の現在の年/月のアウトラインの色。 |
| $ym-current-outline-focus-color | Color | null | :focus 時の現在の年/月のアウトラインの色。 |
| $ym-current-background | Color | null | 現在の年/月の背景。 |
| $ym-current-foreground | Color | null | 現在の年/月の前景。ym-current-background から自動導出されます。 |
| $ym-current-hover-foreground | Color | null | :hover 時の現在の年/月の前景。 |
| $ym-current-hover-background | Color | null | :hover 時の現在の年/月の背景。 |
| $ym-selected-outline-color | Color | null | 選択された年/月ののアウトラインの色。 |
| $ym-selected-hover-outline-color | Color | null | :hover 時の選択状態の現在の年/月のアウトラインの色。 |
| $ym-selected-focus-outline-color | Color | null | :focus 時の選択状態の現在の年/月のアウトラインの色。 |
| $ym-selected-foreground | Color | null | 選択された年/月の前景。ym-selected-background から自動導出されます。 |
| $ym-selected-background | Color | null | 選択された年/月の背景。header-background から自動導出されます。 |
| $ym-selected-hover-foreground | Color | null | :hover 時の選択された年/月の前景。 |
| $ym-selected-hover-background | Color | null | :hover 時の選択された年/月の背景。 |
| $ym-selected-current-outline-color | Color | null | 選択された現在の年/月のアウトラインの色。 |
| $ym-selected-current-outline-hover-color | Color | null | :hover 時の選択状態の現在の年/月のアウトラインの色。 |
| $ym-selected-current-outline-focus-color | Color | null | :focus 時の選択状態の現在の年/月のアウトラインの色。 |
| $ym-selected-current-foreground | Color | null | 選択された現在の年/月の前景。 |
| $ym-selected-current-background | Color | null | 選択された現在の年/月の背景。 |
| $ym-selected-current-hover-foreground | Color | null | :hover 時の選択された現在の年/月の前景。 |
| $ym-selected-current-hover-background | Color | null | :hover 時の選択された現在の年/月の背景。 |
| $week-number-border-radius | List | null | 週番号列の境界線の半径。 |
| $week-number-foreground | Color | null | 週番号列の前景。week-number-background から自動導出されます。 |
| $week-number-background | Color | null | 週番号列の背景。content-background から自動導出されます。 |
| $content-foreground | Color | null | アイドル状態の日付の前景色。content-background から自動導出されます。 |
| $weekend-color | Color | null | 週末の日付の色。content-foreground から自動導出されます。 |
| $inactive-color | Color | null | 現在の月以外の日付の色。content-background から自動導出されます。 |
| $date-border-radius | List | null | 日付セルの境界線の半径。 |
| $date-border-color | Color | null | 日付セルの境界線の色。 |
| $date-hover-border-color | Color | null | :hover 時の日付セルの境界線の色。 |
| $date-focus-border-color | Color | null | :focus 時の日付セルの境界線の色。 |
| $date-hover-background | Color | null | :hover 時の日付セルの背景。content-background から自動導出されます。 |
| $date-focus-background | Color | null | :focus 時の日付セルの背景。date-hover-background から自動導出されます。 |
| $date-hover-foreground | Color | null | :hover 時の日付セルの前景。date-hover-background から自動導出されます。 |
| $date-focus-foreground | Color | null | :focus 時の日付セルの前景。date-hover-foreground から自動導出されます。 |
| $date-selected-border-color | Color | null | 選択された日付の境界線の色。 |
| $date-selected-hover-border-color | Color | null | :hover 時の選択された日付の境界線の色。 |
| $date-selected-focus-border-color | Color | null | :focus 時の選択された日付の境界線の色。 |
| $date-selected-background | Color | null | 選択された日付の背景。header-background から自動導出されます。 |
| $date-selected-foreground | Color | null | 選択された日付の前景。date-selected-background から自動導出されます。 |
| $date-selected-hover-background | Color | null | :hover 時の選択された日付の背景。date-selected-background から自動導出されます。 |
| $date-selected-focus-background | Color | null | :focus 時の選択された日付の背景。 |
| $date-selected-hover-foreground | Color | null | :hover 時の選択された日付の前景。 |
| $date-selected-focus-foreground | Color | null | :focus 時の選択された日付の前景。 |
| $date-selected-special-border-color | Color | null | 選択された特別日付の境界線の色。 |
| $date-selected-special-hover-border-color | Color | null | :hover 時の選択された特別日付の境界線の色。 |
| $date-selected-special-focus-border-color | Color | null | :focus 時の選択された特別日付の境界線の色。 |
| $date-selected-special-background | Color | null | 選択された特別日付の背景。 |
| $date-selected-special-foreground | Color | null | 選択された特別日付の前景。 |
| $date-selected-special-hover-background | Color | null | :hover 時の選択された特別日付の背景。 |
| $date-selected-special-focus-background | Color | null | :focus 時の選択された特別日付の背景。 |
| $date-selected-special-hover-foreground | Color | null | :hover 時の選択された特別日付の前景。 |
| $date-selected-special-focus-foreground | Color | null | :focus 時の選択された特別日付の前景。 |
| $date-range-border-radius | List | null | 日付範囲選択の境界線の半径。 |
| $date-range-border-color | Color | null | 日付範囲選択の境界線の色。 |
| $date-range-preview-border-color | Color | null | 日付範囲選択のプレビュー境界線の色。 |
| $date-selected-range-foreground | Color | null | 選択範囲内の日付の前景。 |
| $date-selected-range-background | Color | null | 選択範囲内の日付の背景。 |
| $date-selected-range-hover-foreground | Color | null | 選択範囲内の日付の :hover 時の前景。 |
| $date-selected-range-hover-background | Color | null | 選択範囲内の日付の :hover 時の背景。 |
| $date-selected-range-focus-foreground | Color | null | 選択範囲内の日付の :focus 時の前景。 |
| $date-selected-range-focus-background | Color | null | 選択範囲内の日付の :focus 時の背景。 |
| $date-selected-current-range-foreground | Color | null | 選択範囲内の現在の日付の前景。 |
| $date-selected-current-range-background | Color | null | 選択範囲内の現在の日付の背景。 |
| $date-selected-current-range-hover-foreground | Color | null | 選択範囲内の現在の日付の :hover 時の前景。 |
| $date-selected-current-range-hover-background | Color | null | 選択範囲内の現在の日付の :hover 時の背景。 |
| $date-selected-current-range-focus-foreground | Color | null | 選択範囲内の現在の日付の :focus 時の前景。 |
| $date-selected-current-range-focus-background | Color | null | 選択範囲内の現在の日付の :focus 時の背景。 |
| $date-current-border-radius | List | null | 現在の日付の境界線の半径。 |
| $date-current-border-color | Color | null | 現在の日付の境界線の色。 |
| $date-current-hover-border-color | Color | null | 現在の日付の :hover 時の境界線の色。 |
| $date-current-focus-border-color | Color | null | 現在の日付の :focus 時の境界線の色。 |
| $date-current-background | Color | null | 現在の日付の背景。 |
| $date-current-foreground | Color | null | 現在の日付の前景。 |
| $date-current-hover-background | Color | null | 現在の日付の :hover 時の背景。 |
| $date-current-focus-background | Color | null | 現在の日付の :focus 時の背景。 |
| $date-current-hover-foreground | Color | null | 現在の日付の :hover 時の前景。 |
| $date-current-focus-foreground | Color | null | 現在の日付の :focus 時の前景。 |
| $date-selected-current-border-color | Color | null | 選択された現在の日付の境界線の色。 |
| $date-selected-current-hover-border-color | Color | null | 選択された現在の日付の :hover 時の境界線の色。 |
| $date-selected-current-focus-border-color | Color | null | 選択された現在の日付の :focus 時の境界線の色。 |
| $date-selected-current-background | Color | null | 選択された現在の日付の背景。 |
| $date-selected-current-hover-background | Color | null | 選択された現在の日付の :hover 時の背景。 |
| $date-selected-current-focus-background | Color | null | 選択された現在の日付の :focus 時の背景。 |
| $date-selected-current-foreground | Color | null | 選択された現在の日付の前景。 |
| $date-selected-current-hover-foreground | Color | null | 選択された現在の日付の :hover 時の前景。 |
| $date-selected-current-focus-foreground | Color | null | 選択された現在の日付の :focus 時の前景。 |
| $date-special-border-radius | List | null | 特別な日付の境界線の半径。 |
| $date-special-border-color | Color | null | 特別な日付の境界線の色。 |
| $date-special-hover-border-color | Color | null | 特別な日付の :hover 時の境界線の色。 |
| $date-special-focus-border-color | Color | null | 特別な日付の :focus 時の境界線の色。 |
| $date-special-foreground | Color | null | 特別な日付の前景。header-background から自動導出されます。 |
| $date-special-background | Color | null | 特別な日付の背景。 |
| $date-special-hover-foreground | Color | null | 特別な日付の :hover 時の前景。 |
| $date-special-hover-background | Color | null | 特別な日付の :hover 時の背景。 |
| $date-special-focus-foreground | Color | null | 特別な日付の :focus 時の前景。 |
| $date-special-focus-background | Color | null | 特別な日付の :focus 時の背景。 |
| $date-special-range-border-color | Color | null | 選択範囲内の特別な日付の境界線の色。 |
| $date-special-range-hover-border-color | Color | null | 選択範囲内の特別な日付の :hover 時の境界線の色。 |
| $date-special-range-focus-border-color | Color | null | 選択範囲内の特別な日付の :focus 時の境界線の色。 |
| $date-special-range-foreground | Color | null | 選択範囲内の特別な日付の前景。 |
| $date-special-range-hover-foreground | Color | null | 選択範囲内の特別な日付の :hover 時の前景。 |
| $date-special-range-focus-foreground | Color | null | 選択範囲内の特別な日付の :focus 時の前景。 |
| $date-special-range-background | Color | null | 選択範囲内の特別な日付の背景。 |
| $date-special-range-hover-background | Color | null | 選択範囲内の特別な日付の :hover 時の背景。 |
| $date-special-range-focus-background | Color | null | 選択範囲内の特別な日付の :focus 時の背景。 |
| $date-disabled-foreground | Color | null | 無効な日付の前景。 |
| $date-disabled-range-foreground | Color | null | 選択範囲内の無効な日付の前景。 |
Card テーマ プライマリ トークン: - `$background` - カードの背景色。 派生色はコントラストに合わせて自動計算されます。
背景色とコンテンツ テキストの色を変更します。
$my-card-theme: card-theme($background: #fff);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-card-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | カードの背景色。プライマリ - すべてのテキストの色を導出します。 |
| $outline-color | Color | null | Outlined タイプのカードのアウトラインの色。 |
| $header-text-color | Color | null | カードのタイトルのテキストの色。background から自動導出されます。 |
| $subtitle-text-color | Color | null | カードのサブタイトルのテキストの色。background から自動導出されます (ミュート)。 |
| $content-text-color | Color | null | カードのコンテンツのテキストの色。background から自動導出されます (ミュート)。 |
| $actions-text-color | Color | null | カード ボタンのテキストの色。background から自動導出されます。 |
| $resting-shadow | box-shadow | null | レスティング状態のカードの影。 |
| $hover-shadow | box-shadow | null | ホバー状態のカードの影。 |
| $border-radius | List | null | カードに使用される 0 から 1 までの境界線の半径の割合。 |
Carousel テーマ プライマリ トークン: - `$button-background` - ナビゲーション ボタンの背景。 - `$indicator-background` - インジケーター コンテナーの背景。 ボタンの色は、button-background からホバー状態、無効状態へと変化します。
前へ/次へボタンの色を変更します。
$my-carousel-theme: carousel-theme( $button-background: black, $button-hover-background: white);// Pass the carousel theme to the css-vars() mixin@include css-vars($my-carousel-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $slide-background | Color | null | スライドの背景色。 |
| $button-background | Color | null | 前へ/次へボタンのアイドル背景色。プライマリ - arrow、hover、disabled、focus の色を導出します。 |
| $button-hover-background | Color | null | 前へ/次へボタンのホバー背景色。button-background から自動導出されます。 |
| $button-disabled-background | Color | null | 前へ/次へボタンの無効な背景色。button-background から自動導出されます。 |
| $button-arrow-color | Color | null | 前へ/次へボタンのアイドル矢印の色。button-background から自動導出されます。 |
| $button-hover-arrow-color | Color | null | 前へ/次へボタンのホバー矢印の色。button-hover-background から自動導出されます。 |
| $button-disabled-arrow-color | Color | null | 前へ/次へボタンの無効な矢印の色。button-disabled-background から自動導出されます。 |
| $button-border-color | Color | null | 前へ/次へボタンのアイドル状態の境界線の色。from button-background (indigo) から自動導出されます。 |
| $button-hover-border-color | Color | null | 前へ/次へボタンのホバーの境界線の色。button-border-color から自動導出されます。 |
| $button-focus-border-color | Color | null | フォーカス時のナビゲーション ボタンの境界線の色。button-focus-arrow-color または button-background から自動導出されます。 |
| $button-disabled-border-color | Color | null | 前へ/次へボタンの無効な境界線の色。 |
| $indicator-background | Color | null | インジケーター コンテナーの背景色。プライマリ - dot、border、active、focus の色を導出します。 |
| $label-indicator-background | Color | null | ラベル インジケーター コンテナーの背景色。 |
| $indicator-dot-color | Color | null | アイドル インジケーター点の色。indicator-background から自動導出されます。 |
| $indicator-hover-dot-color | Color | null | ホバー インジケーターの点の色。indicator-dot-color から自動導出されます。 |
| $indicator-focus-color | Color | null | フォーカス時のインジケーターの境界線と点の色。indicator-background または button-background から自動導出されます。 |
| $indicator-border-color | Color | null | アイドル インジケーター境界の色。indicator-background または indicator-dot-color から自動導出されます。 |
| $indicator-active-dot-color | Color | null | アクティブ インジケーター点の色。indicator-background または button-background から自動導出されます。 |
| $indicator-active-border-color | Color | null | アクティブ インジケーター境界の色。indicator-active-dot-color から自動導出されます。 |
| $indicator-active-hover-dot-color | Color | null | ホバー時のアクティブなインジケーターの点の色。indicator-active-dot-color から自動導出されます。 |
| $button-shadow | box-shadow | null | 前へ/次へボタンの下の影。 |
| $border-radius | List | null | カルーセル コンポーネントに使用される 0 から 1 までの境界線の半径。 |
Chat テーマ プライマリ トークン: - `$header-background` - チャット ヘッダーの背景色。 - `$message-background` - メッセージ バブルの背景色。 派生色はコントラストに合わせて自動計算されます。
背景色を変更します
$my-chat-theme: chat-theme($background: blue);// css-vars ミックスインへテーマを渡します。@include css-vars($my-chat-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | チャット コンポーネントの背景色。 |
| $header-background | Color | null | チャット ヘッダーの背景色。プライマリ - header-color を派生します。 |
| $header-color | Color | null | チャット ヘッダーのテキストの色。header-background から自動導出されます。 |
| $header-border | Color | null | チャット ヘッダーの境界線の色。 |
| $message-background | Color | null | 送信済みメッセージ バブルの背景色。プライマリ - message-color、message-actions-color を派生します。 |
| $message-color | Color | null | チャット メッセージのテキストの色。message-background から自動導出されます。 |
| $message-actions-color | Color | null | チャット メッセージ アクションのアイコンの色。message-color から自動導出されます。 |
| $file-background | Color | null | 画像メッセージ コンテナーの背景色。 |
| $file-icon-color | Color | null | 添付ファイル アイコンの色。 |
| $file-icon-accent-color | Color | null | 添付ファイル アイコンのアクセント色。 |
| $image-background | Color | null | 画像メッセージ コンテナーの背景色。 |
| $image-border | Color | null | 画像メッセージ コンテナーの境界線の色。 |
| $image-attachment-icon | Color | null | メッセージ添付アイコンの色。 |
| $chat-input-border | Color | null | チャット入力領域の境界線の色。 |
| $progress-indicator-color | Color | null | チャット コンポーネント内のプログレス インジケーターの色。 |
| $code-background | Color | null | チャット コンポーネント内のコード スニペットの背景色。 |
| $code-border | Color | null | チャット コンポーネント内のコード スニペットの境界線の色。 |
チェックボックス テーマ プライマリ トークン: - `$fill-color` - チェックされた状態の境界線と塗りつぶしの色。 - `$empty-color` - チェックされていない境界線の色。 - `$error-color` - 無効な状態の色。 `$fill-color` を設定するだけで、チェックされたすべての状態のテーマが一貫して適用されます。
チェックされた塗りつぶし色を変更します。
$my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);// css-vars ミックスインへテーマを渡します。@include css-vars($my-checkbox-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $label-color | Color | null | ラベル テキストに使用されるテキストの色。 |
| $label-color-hover | Color | null | ホバー時のラベル テキストに使用されるテキストの色。label-color から自動導出されます。 |
| $empty-color | Color | null | 未チェック境界線の色。チェックされていない状態の場合はプライマリです。 |
| $empty-color-hover | Color | null | ホバー時の未チェック境界線の色。empty-color から自動導出されます。 |
| $empty-fill-color | Color | null | 未チェックの塗りつぶし色。 |
| $fill-color | Color | null | チェックされた境界と塗りつぶし色。プライマリ - tick-color、focus の色を派生します。 |
| $fill-color-hover | Color | null | ホバー時にチェックされた境界線と塗りつぶしの色。fill-color から自動導出されます。 |
| $tick-color | Color | null | チェックされたマークの色。fill-color (コントラスト) から自動導出されます。 |
| $tick-color-hover | Color | null | ホバー時にチェックされたマークの色。 |
| $tick-width | Number | null | チェックされたマークの幅。 |
| $disabled-color | Color | null | 無効にされた境界と塗りつぶし色。 |
| $disabled-tick-color | Color | null | 無効状態のチェック マークの色。 |
| $disabled-indeterminate-color | Color | null | 不確定な状態時の無効な境界線と塗りつぶし色。fill-color から自動導出されます。 |
| $disabled-color-label | Color | null | 無効のラベルの色。 |
| $border-radius | List | null | チェックボックス コンポーネントに使用される 0 から 1 までの境界線の半径。 |
| $border-radius-ripple | List | null | チェックボックス リップルに使用される境界線の半径。 |
| $focus-outline-color | Color | null | フォーカスのアウトラインの色。empty-color (indigo) または fill-color (bootstrap) から自動導出されます。 |
| $focus-outline-color-focused | Color | null | フォーカスされた状態のフォーカス アウトラインの色。fill-color (indigo) から自動導出されます。 |
| $focus-border-color | Color | null | フォーカス境界線の色。fill-color から自動導出されます。 |
| $error-color | Color | null | 無効な状態の境界線と塗りつぶしの色。エラー状態の場合はプライマリです。 |
| $error-color-hover | Color | null | ホバー時に無効な状態の境界線と塗りつぶしの色。error-color から自動導出されます。 |
| $focus-outline-color-error | Color | null | フォーカス アウトライン エラーの色。error-color から自動導出されます。 周りの領域が暗い場合は light に設定します。 |
チップ テーマ プライマリ トークン: - `$background` - 主のチップの背景。 - `$selected-background` - 選択された状態の背景。 `$background` のみを設定すると、すべての状態が適切に派生された完全なチップ テーマが作成されます。
背景色を変更します。
$my-chip-theme: igx-chip-theme($background: black);// css-vars ミックスインへテーマを渡します。@include css-vars($my-chip-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $border-radius | List | null | チップの端の丸み。 |
| $text-color | Color | null | チップのテキストの色。background から自動導出されます。 |
| $background | Color | null | チップの背景色。プライマリ - text-color、border-color、hover/focus の状態を導出します。 |
| $border-color | Color | null | チップの境界線の色。background から自動導出されます。 |
| $disabled-text-color | Color | null | 無効なチップのテキストの色。 |
| $disabled-background | Color | null | 無効なチップの背景色。 |
| $disabled-border-color | Color | null | 無効なチップの境界線の色。 |
| $ghost-background | Color | null | チップ ゴーストの背景色。 |
| $ghost-text-color | Color | null | チップ ゴーストのテキストの色。 |
| $ghost-shadow | box-shadow | null | チップ ゴーストの影。 |
| $hover-text-color | Color | null | ホバー時のチップ テキストの色。hover-background から自動的に派生されます。 |
| $hover-background | Color | null | チップ ホバーの背景色。background から自動導出されます。 |
| $hover-border-color | Color | null | ホバー時のチップの境界線の色。hover-background から自動的に派生されます。 |
| $focus-text-color | Color | null | チップのテキスト フォーカスの色。focus-background から自動導出されます。 |
| $focus-background | Color | null | チップのフォーカスの背景色。background から自動導出されます。 |
| $focus-border-color | color | null | チップのフォーカス境界線の色。focus-background から自動導出されます。 |
| $selected-text-color | color | null | 選択されたチップのテキストの色。selected-background から自動導出されます。 |
| $selected-background | color | null | 選択されたチップの背景色。background から自動導出されます。 |
| $selected-border-color | color | null | 選択されたチップの境界線の色。selected-background から自動導出されます。 |
| $hover-selected-text-color | color | null | 選択されたチップのホバー テキストの色。hover-selected-background から自動導出されます。 |
| $hover-selected-background | color | null | 選択されたチップのホバーの背景色。selected-background から自動導出されます。 |
| $hover-selected-border-color | color | null | 選択されたチップのホバー境界線の色。hover-selected-background から自動導出されます。 |
| $focus-selected-text-color | color | null | 選択されたチップのテキスト フォーカスの色。focus-selected-background から自動導出されます。 |
| $focus-selected-background | color | null | 選択されたチップのフォーカスの背景色。selected-background から自動導出されます。 |
| $focus-selected-border-color | color | null | 選択されたチップのフォーカス境界線の色。focus-selected-background から自動導出されます。 |
| $remove-icon-color | color | null | チップの削除アイコンの色。 |
| $remove-icon-color-focus | color | null | チップのフォーカス削除アイコンの色。 |
Column Actions テーマ プライマリ トークン: - `$background-color` - パネルの背景色。 派生色はコントラストに合わせて自動計算されます。
タイトルの色を変更します。
$column-actions-theme: igx-column-actions-theme($title-color: black);// css-vars ミックスインへテーマを渡します。@include css-vars($column-actions-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $title-color | Color | null | リストのタイトルに使用されるテキストの色。background-color から自動導出されます。 |
| $background-color | Color | null | パネルの背景色。プライマリ - title-color を派生します。 |
Combo テーマ プライマリ トークン: - `$toggle-button-background` - トグル ボタンの背景。 - `$empty-list-background` - 空のリストの背景。 - `$clear-button-background-focus` - クリア ボタンのフォーカスの背景。 トグル ボタンの色は、toggle-button-background からフォーカスおよび無効状態まで段階的に変化します。
Combo の空のリストの背景を変更します。
$my-combo-theme: igx-checkbox-theme($empty-list-background);// css-vars ミックスインへテーマを渡します。@include css-vars($my-combo-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $search-separator-border-color | Color | null | コンボ検索ボックス セパレーターの色。 |
| $empty-list-placeholder-color | Color | null | コンボ プレースホルダー テキストの色。empty-list-background から自動導出されます。 |
| $empty-list-background | Color | null | コンボ リストの背景色。プライマリ - empty-list-placeholder-color を導出します。 |
| $toggle-button-background | Color | null | コンボ トグル ボタンの背景色。プライマリ - すべてのトグル ボタンの色を導出します。 |
| $toggle-button-background-focus | Color | null | Material box バリアントでコンボがフォーカスされている時のコンボ トグル ボタンの背景色。toggle-button-background から自動導出されます。 |
| $toggle-button-background-focus--border | Color | null | Material border バリアントでコンボがフォーカスされている時のコンボ トグル ボタンの背景色。toggle-button-background から自動導出されます。 |
| $toggle-button-background-disabled | Color | null | コンボが無効になっているときのコンボ トグル ボタンの背景色。toggle-button-background から自動導出されます。 |
| $toggle-button-foreground | Color | null | コンボ トグル ボタンの前景色。toggle-button-background から自動導出されます。 |
| $toggle-button-foreground-focus | Color | null | コンボがフォーカスされている時のコンボ トグル ボタンの前景色。toggle-button-background-focus から自動導出されます。 |
| $toggle-button-foreground-disabled | Color | null | コンボが無効になっている時のコンボ トグル ボタンの前景色。toggle-button-background から自動導出されます。 |
| $toggle-button-foreground-filled | Color | null | コンボが満たされた時のコンボ トグル ボタンの前景色。toggle-button-background から自動導出されます。 |
| $clear-button-background | Color | null | コンボ クリア ボタンの背景色。 |
| $clear-button-background-focus | Color | null | コンボがフォーカスされている時のコンボ クリア ボタンの背景色。ボタンのフォーカスをクリアするにプライマリ。 |
| $clear-button-foreground | Color | null | コンボ クリア ボタンの前景色。 |
| $clear-button-foreground-focus | Color | null | コンボがフォーカスされている時のコンボ クリア ボタンの前景色。clear-button-background-focus から自動導出されます。 |
Date Range Picker テーマ 注: このコンポーネントには自動トークン導出機能はありません。 すべてのトークンは計算なしでスキーマに直接渡されます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $label-color | color | null | 日付範囲セパレーター ラベルの色。 |
ダイアログ テーマ プライマリ トークン: - `$background` - ダイアログの背景色。 `$background` のみを設定すると、適切なテキストコントラストを備えた完全なダイアログ テーマが作成されます。
背景色を変更します。
$my-dialog-theme: dialog-theme($background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-dialog-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ダイアログの背景色。プライマリ - title-color、message-color、border-color を導出します。 |
| $title-color | Color | null | ダイアログ タイトル テキストの色。background から自動導出されます。 |
| $message-color | Color | null | ダイアログ メッセージ テキストの色。background から自動導出されます (半透明)。 |
| $shadow | box-shadow | null | ダイアログに使用される影。 |
| $border-radius | List | null | ダイアログ コンポーネントに使用される境界線の半径。 |
| $border-color | Color | null | ダイアログ コンポーネントに使用される境界線の色。background から自動導出されます。 |
Divider テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。
Divider の色を変更します。
$my-divider-theme: divider-theme($color: orange);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-divider-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $color | Color | null | デバイダーの色。(ダッシュされた divider にグラデーションはサポートしません。) |
| $inset | number | null | ディバイダのインセット値。 |
Dock Manager テーマ 注: このコンポーネントは、meta.keywords($rest) を使用したパススルー パターンを使用します。 すべてのトークンは、自動導出なしでスキーマに直接渡されます。 完全なカスタマイズを行うには、各トークンを個別に設定する必要があります。
アイコン ドック マネージャーで背景とアイコンの色を変更します。
$my-dock-manager-theme: dock-manager-theme();// css-vars() ミックスインへテーマを渡します。@include css-vars($my-dock-manager-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $accent-color | Color | null | ピン固定ヘッダーの背景色、ジョイスティックの背景色と境界線の色、およびコンテキスト メニューの背景色を設定します。 |
| $active-color | Color | null | タブ、ペイン、およびメニューのアクティブなテキストと境界線の色を設定します。 |
| $border-color | Color | null | ドック マネージャーでグローバルな境界線の色を設定します。ペイン コンテンツの背景とコンテキスト メニューのアクティブな背景色も設定します。 |
| $button-text | Color | null | ボタンのテキストの色を設定します。 |
| $context-menu-background | Color | null | コンテキスト メニューの背景色を設定します。 |
| $context-menu-background-active | Color | null | アクティブ コンテキスト メニューの背景色を設定します。 |
| $context-menu-color | Color | null | コンテキスト メニューのテキストの色を設定します。 |
| $context-menu-color-active | Color | null | アクティブ コンテキスト メニューのテキストの色を設定します。 |
| $dock-background | Color | null | ドック マネージャーの背景色を設定します。 |
| $dock-text | Color | null | ドック マネージャーのテキストの色を設定します。 |
| $drop-shadow-background | Color | null | 影付きの背景色を設定します。 |
| $floating-pane-border-color | Color | null | フローティング ペインの境界線の色を設定します。 |
| $flyout-shadow-color | Color | null | フライアウト影の色を設定します。 |
| $joystick-background | Color | null | ジョイスティックの背景色を設定します。 |
| $joystick-background-active | Color | null | ジョイスティックの背景色を設定します。 |
| $joystick-border-color | Color | null | ジョイスティックの境界線の色を設定します。 |
| $joystick-icon-color | Color | null | ジョイスティック アイコンの色を設定します。 |
| $joystick-icon-color-active | Color | null | アクティブなジョイスティック アイコンの色を設定します。 |
| $pane-content-background | Color | null | コンテンツ ペインの背景色を設定します。 |
| $pane-content-text | Color | null | コンテンツ ペインのテキストの色を設定します。 |
| $pane-header-background | Color | null | ペイン ヘッダーの背景色を設定します。 |
| $pane-header-text | Color | null | ペイン ヘッダーのテキストの色を設定します。 |
| $pinned-header-background | Color | null | ピン固定ヘッダーの背景色を設定します。 |
| $pinned-header-text | Color | null | ピン固定ヘッダーのテキストの色を設定します。 |
| $background-color | Color | null | ドック マネージャーの基本色と、ペインヘッダーおよびタブの背景色を設定します。 |
| $splitter-background | Color | null | スプリッターの背景色を設定します。 |
| $splitter-handle | Color | null | スプリッター ハンドルの背景色を設定します。 |
| $tab-background | Color | null | タブの背景色を設定します。 |
| $tab-background-active | Color | null | アクティブなタブの背景色を設定します。 |
| $tab-border-color | Color | null | タブの境界線の色を設定します。 |
| $tab-border-color-active | Color | null | アクティブなタブの境界線の色を設定します。 |
| $tab-text | Color | null | タブのテキストの色を設定します。 |
| $tab-text-active | Color | null | アクティブなタブのテキストの色を設定します。 |
| $text-color | Color | null | ドック マネージャーのほとんどの要素のテキストの色を設定します。デフォルトのジョイスティック アイコンの色として使用されます。 |
Drop-down テーマ プライマリ トークン: - `$background-color` - ドロップダウンの背景。 - `$selected-item-background` - 選択された項目の背景。 派生色はコントラストに合わせて自動計算されます。
ドロップダウンの背景色を変更します。
$my-dropdown-theme: drop-down-theme($background-color: #09f);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-dropdown-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background-color | Color | null | ドロップダウンの背景色。プライマリ - item、hover、focus、selected、disabled の色を導出します。 |
| $header-text-color | Color | null | ドロップダウン ヘッダー テキストの色。background-color から自動導出されます。 |
| $item-text-color | Color | null | ドロップダウン項目のテキストの色。background-color から自動導出されます。 |
| $item-icon-color | Color | null | ドロップダウン項目のアイコンの色。item-text-color から自動的に導出されます。 |
| $hover-item-text-color | Color | null | ドロップダウン項目のホバーのテキストの色。item-text-color から自動的に導出されます。 |
| $hover-item-icon-color | Color | null | ドロップダウン項目のホバーのアイコンの色。hover-item-text-color から自動導出されます。 |
| $hover-item-background | Color | null | ドロップダウン ホバー項目の背景色。background-color から自動導出されます。 |
| $focused-item-background | Color | null | ドロップダウン フォーカスされた項目の背景色。background-color から自動導出されます。 |
| $focused-item-text-color | Color | null | ドロップダウン フォーカスされた項目のテキストの色。focused-item-background から自動導出されます。 |
| $focused-item-border-color | Color | null | ドロップダウン項目のフォーカス境界線の色。selected-item-background (indigo) から自動導出されます。 |
| $selected-item-background | Color | null | ドロップダウン選択された項目の背景色。プライマリ - selected text/icon と hover/focus の状態を導出します。background-color から自動導出されます。 |
| $selected-item-text-color | Color | null | ドロップダウン選択された項目のテキストの色。selected-item-background から自動導出されます。 |
| $selected-item-icon-color | Color | null | 選択されたドロップダウン項目のアイコンの色。selected-item-text-color から自動導出されます。 |
| $selected-hover-item-background | Color | null | ドロップダウン選択された項目ホバーの背景色。selected-item-background から自動導出されます。 |
| $selected-hover-item-text-color | Color | null | ドロップダウン選択された項目ホバーのテキストの色。selected-hover-item-background から自動導出されます。 |
| $selected-hover-item-icon-color | Color | null | 選択されたドロップダウン項目のホバーのアイコンの色。selected-hover-item-text-color から自動導出されます。 |
| $selected-focus-item-background | Color | null | ドロップダウン選択された項目フォーカスの背景色。selected-item-background から自動導出されます。 |
| $selected-focus-item-text-color | Color | null | ドロップダウン選択された項目フォーカスのテキストの色。selected-focus-item-background から自動導出されます。 |
| $disabled-item-background | Color | null | ドロップダウンが無効にされた項目の背景色。 |
| $disabled-item-text-color | Color | null | ドロップダウンが無効にされた項目のテキストの色。background-color または disabled-item-background から自動導出されます。 |
| $shadow | box-shadow | null | ドロップダウンに使用する影を設定します。 |
| $border-width | Number | null | ドロップダウン コンポーネントに使用される境界線の幅。 |
| $border-color | Color | null | ドロップダウン コンポーネントに使用される 0 から 1 までの境界線の色。 |
| $border-radius | List | null | ドロップダウン コンポーネントに使用される境界線の半径。 |
| $item-border-radius | List | null | ドロップダウン項目に使用される境界の半径。 |
Expansion Panel テーマ プライマリ トークン: - `$header-background` - パネル ヘッダーの背景。 - `$body-background` - パネル本体の背景。 派生色はコントラストに合わせて自動計算されます。
ヘッダーの背景色を変更します。
$my-expansion-panel-theme: expansion-panel-theme($header-background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-expansion-panel-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $header-background | Color | null | パネル ヘッダーの背景色。プライマリ - ヘッダーの color、focus、disabled を導出します。 |
| $header-focus-background | Color | null | パネル ヘッダー フォーカスの背景色。header-background から自動導出されます。 |
| $header-title-color | Color | null | パネル ヘッダー タイトル テキストの色。header-background から自動導出されます。 |
| $header-description-color | Color | null | パネル ヘッダー 説明のテキストの色。header-background (ミュート) から自動導出されます。 |
| $header-icon-color | Color | null | パネル ヘッダーのアイコンの色。header-background から自動導出されます。 |
| $body-color | Color | null | パネル本体テキストの色。body-background から自動導出されます。 |
| $body-background | Color | null | パネル本体の背景色。body のプライマリ - body-color を導出します。 |
| $disabled-text-color | Color | null | パネルが無効なテキストの色。header-background から自動導出されます。 |
| $disabled-description-color | Color | null | 無効になっているパネル ヘッダーの説明のテキストの色。header-background から自動導出されます。 |
| $expanded-margin | Number | null | アコーディオン内に配置されたときの展開状態の展開パネルのマージン。 |
| $border-radius | List | null | 展開パネル コンポーネントに使用される 0 から 1 までの境界線の半径。 |
Accordion テーマ プライマリ トークン: - `$header-background` - パネル ヘッダーの背景。 - `$body-background` - パネル本体の背景。 派生色はコントラストに合わせて自動計算されます。
グリッド集計テーマ プライマリ トークン: - `$background-color` - 集計の背景色。 - `$label-color` - 集計ラベルの色。 派生色はコントラストに合わせて自動計算されます。
集計の背景色およびラベル色を変更します。
$my-summary-theme: grid-summary-theme( $background-color: black, $label-color: white);// css-vars ミックスインへテーマを渡します。@include css-vars($my-summary-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background-color | Color | null | 集計の背景色。プライマリ - label-color、result-color、border-color、pinned-border-color を導出します。 |
| $label-color | Color | null | 集計ラベルの色。プライマリ - abel-hover-color を導出します。background-color から自動導出されます。 |
| $result-color | Color | null | 集計の結果/値の色。background-color から自動導出されます。 |
| $border-color | Color | null | 集計の境界線の色。background-color から自動導出されます。 |
| $pinned-border-width | Color | null | 集計パネルの境界線の幅。 |
| $pinned-border-style | Color | null | 集計パネルの境界線のスタイル。 |
| $pinned-border-color | Color | null | 集計パネルの境界線の色。background-color から自動導出されます。 |
| $label-hover-color | Color | null | 集計のホバー ラベルの色。label-color から自動導出されます。 |
Grid テーマ プライマリ トークン: - `$header-background` - テーブル ヘッダーの背景。 - `$content-background` - テーブル本体の背景。 - `$ghost-header-background` - ドラッグされたヘッダーの背景色。 - `$group-row-background` - グリッド グループ行の背景色。 - `$grouparea-background` - グリッド グループエリアの背景色。 派生色はコントラストに合わせて自動計算されます。
ヘッダーの背景色を変更します。
$my-grid-theme: grid-theme($header-background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-grid-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $header-background | Color | null | テーブル ヘッダーの背景色。プライマリ - header-text-color、header-border-color などを導出します。 |
| $header-text-color | Color | null | テーブル ヘッダー テキストの色。header-background から自動導出されます。 |
| $header-border-width | String | null | ヘッダー境界線に使用される境界線の幅。 |
| $header-border-style | String | null | ヘッダー境界線に使用される境界線のスタイル。 |
| $header-border-color | Color | null | ヘッダー境界線に使用される色。header-background から自動導出されます。 |
| $header-selected-background | Color | null | 選択時のテーブル ヘッダーの背景色。header-background から自動導出されます。 |
| $header-selected-text-color | Color | null | 選択時のテーブル ヘッダーのテキストの色。header-selected-background から自動導出されます。 |
| $sorted-header-icon-color | Color | null | 並べ替え時の並べ替えアイコンの色header-background から自動導出されます。 |
| $sortable-header-icon-hover-color | color | null | ソート可能な場合のホバー時のアイコンの色。sorted-header-icon-color から自動導出されます。 |
| $content-background | Color | null | テーブル本体の背景色。プライマリ - content-text-color、行の背景、セルの背景、境界線を導出します。 |
| $content-text-color | Color | null | テーブル本体 テキストの色。content-background から自動導出されます。 |
| $ghost-header-text-color | Color | null | ドラッグされたヘッダーテキストの色。ghost-header-background から自動導出されます。 |
| $ghost-header-icon-color | Color | null | ドラッグされたヘッダー アイコンの色。ghost-header-background から自動導出されます。 |
| $ghost-header-background | Color | null | ドラッグされたヘッダーの背景色。プライマリ - ghost-header-text-color、ghost-header-icon-color を導出します。 |
| $row-odd-background | Color | null | 奇数行の背景色。content-background から自動導出されます。 |
| $row-even-background | Color | null | 偶数行の背景色。content-background から自動導出されます。 |
| $row-odd-text-color | Color | null | 奇数行テキストの色。row-odd-background から自動導出されます。 |
| $row-even-text-color | Color | null | 偶数行テキストの色。row-even-background から自動導出されます。 |
| $row-selected-background | Color | null | 選択された行の背景色。content-background から自動導出されます。 |
| $row-selected-hover-background | Color | null | 選択された行のホバーの背景色。row-selected-background から自動導出されます。 |
| $row-selected-text-color | Color | null | 選択された行のテキストの色。row-selected-background から自動導出されます。 |
| $row-selected-hover-text-color | Color | null | 選択された行のホバー テキストの色。row-selected-hover-background から自動導出されます。 |
| $row-hover-background | Color | null | ホバー行の背景色。content-background から自動導出されます。 |
| $row-hover-text-color | Color | null | ホバー行のテキストの色。row-hover-background から自動導出されます。 |
| $row-border-color | Color | null | 行の下の境界線の色。content-background から自動導出されます。 |
| $pinned-border-width | String | null | ピン固定境界線の境界線の幅。 |
| $pinned-border-style | String | null | ピン固定境界線の CSS 境界線のスタイル。 |
| $pinned-border-color | Color | null | ピン固定境界線の色。content-background から自動導出されます。 |
| $cell-active-border-color | Color | null | アクティブなセルの境界線の色。content-background から自動導出されます。 |
| $cell-selected-background | Color | null | 選択されたセルの背景色。content-background から自動導出されます。 |
| $cell-selected-text-color | Color | null | 選択されたセルのテキストの色。cell-selected-background から自動導出されます。 |
| $cell-editing-background | Color | null | 編集されるセルの背景。content-background から自動導出されます。 |
| $cell-editing-foreground | Color | null | 編集モードのセルのテキストの色。cell-editing-background から自動導出されます。 |
| $cell-editing-focus-foreground | Color | null | フォーカス時の編集モードのセルのテキストの色。cell-editing-background から自動導出されます。 |
| $cell-edited-value-color | Color | null | 編集されたセルのテキストの色。 |
| $cell-new-color | Color | null | 新しいセルのテキストの色。 |
| $cell-disabled-color | Color | null | 無効なセルのテキストの色。 |
| $cell-selected-within-background | Color | null | 選択された行の選択セルの背景。row-selected-background から自動導出されます。 |
| $cell-selected-within-text-color | Color | null | 選択された行の選択セルの色。cell-selected-within-background から自動導出されます。 |
| $edit-mode-color | Color | null | 編集モードにおける行/セルの周囲の色。content-background から自動導出されます。 |
| $edited-row-indicator | Color | null | 編集された行インジケーター線の色。 |
| $resize-line-color | Color | null | テーブル ヘッダーのサイズ変更線の色。 |
| $drop-indicator-color | Color | null | 列ドラッグ インジケーター線の色。 |
| $grouparea-background | Color | null | グリッド グループ領域の背景色。プライマリ - grouparea-color、drop-area-background を導出します。header-background から自動導出されます。 |
| $grouparea-color | Color | null | グリッド グループ領域の色。grouparea-background から自動導出されます。 |
| $group-row-background | Color | null | グリッド グループ行の背景色。プライマリ - expand-icon-color、group-row-selected-background、group-label-text、group-count-background を導出します。header-background から自動導出されます。 |
| $group-row-selected-background | Color | null | グループ行の選択された背景。group-row-background から自動導出されます。 |
| $group-label-column-name-text | Color | null | グリッド グループ行名前のテキストの色。 |
| $group-label-icon | Color | null | グリッド グループ行アイコンの色。 |
| $group-label-text | Color | null | グリッド グループ行テキストの色。group-row-background または group-row-selected-background から自動導出されます。 |
| $expand-all-icon-color | Color | null | ヘッダーの全展開アイコンの色。header-background から自動導出されます。 |
| $expand-all-icon-hover-color | Color | null | ヘッダーの全展開アイコンのホバー色。header-background から自動導出されます。 |
| $expand-icon-color | Color | null | グリッド行の展開アイコンの色。group-row-background または group-row-selected-background から自動導出されます。 |
| $expand-icon-hover-color | Color | null | グリッド行の展開アイコン ホバーの色。expand-icon-color から自動導出されます。 |
| $active-expand-icon-color | Color | null | アクティブな展開アイコンの色。 |
| $active-expand-icon-hover-color | Color | null | アクティブな展開アイコンのホバー色。 |
| $group-count-background | Color | null | グループ行数バッジの背景。group-row-background または group-row-selected-background から自動導出されます。 |
| $group-count-text-color | Color | null | グループ行数バッジのテキストの色。group-count-background から自動導出されます。 |
| $drop-area-text-color | Color | null | ドロップ領域テキストの色。drop-area-background から自動導出されます。 |
| $drop-area-icon-color | Color | null | ドロップ領域アイコンの色。drop-area-background から自動導出されます。 |
| $drop-area-background | Color | null | ドロップ領域の背景色。grouparea-background から自動導出されます。 |
| $drop-area-on-drop-background | Color | null | ドロップ時のドロップ領域の背景。drop-area-background から自動導出されます。 |
| $filtering-header-background | Color | null | フィルターされた列ヘッダーの背景。header-background から自動導出されます。 |
| $filtering-header-text-color | Color | null | フィルターされた列ヘッダーのテキストの色。filtering-header-background から自動導出されます。 |
| $filtering-row-background | Color | null | フィルタリング行の背景。header-background から自動導出されます。 |
| $filtering-row-text-color | Color | null | フィルタリング行のテキストの色。filtering-row-background から自動導出されます。 |
| $excel-filtering-header-foreground | Color | null | Excel フィルタリング ヘッダーのテキストの色。filtering-row-background から自動導出されます。 |
| $excel-filtering-subheader-foreground | Color | null | Excel フィルタリングのサブヘッダーのテキストの色。filtering-row-background から自動導出されます。 |
| $excel-filtering-actions-foreground | Color | null | Excel フィルタリング アクションのテキストの色。filtering-row-background から自動導出されます。 |
| $excel-filtering-actions-hover-foreground | Color | null | Excel フィルタリング アクションのホバー テキストの色。 |
| $excel-filtering-actions-disabled-foreground | Color | null | Excel のフィルタリング アクションの無効なテキストの色。filtering-row-background から自動導出されます。 |
| $tree-filtered-text-color | Color | null | フォーカスされるグループ化行の背景色。 |
| $summaries-patch-background | Color | null | 主要な集計パッチの背景。 |
| $row-highlight | Color | null | グリッド行の強調表示の指示の色。 |
| $grid-shadow | box-shadow | null | グリッドの影。 |
| $drag-shadow | box-shadow | null | 移動可能な要素の影。 |
| $row-ghost-background | color | null | ドラッグされた行の背景色。 |
| $row-drag-color | color | null | 行ドラッグのハンドルの色。 |
| $grid-border-color | Color | null | グリッド境界線の色。 |
| $drop-area-border-radius | List | null | 列ドロップ領域の境界の半径。 |
Grid Toolbar テーマ プライマリ トークン: - `$background-color` - ツールバーの背景色。 - `$dropdown-background` - ツールバー ドロップダウンの背景色。 - `$item-hover-background` - ドロップダウン項目のホバー背景。 - `$item-focus-background` - ドロップダウン項目のフォーカス背景。 派生色はコントラストに合わせて自動計算されます。
ツールバーの背景色を変更します。
$my-toolbar-theme: grid-toolbar-theme( $background-color: black);// css-vars ミックスインへテーマを渡します。@include css-vars($my-toolbar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background-color | Color | null | ツールバーの背景色。プライマリ - title-text-color を導出します。 |
| $title-text-color | Color | null | ツールバー タイトル テキストの色。background-color から自動導出されます。 |
| $dropdown-background | Color | null | ツールバー ドロップダウンの背景色。プライマリ - item-text-color を導出します。 |
| $item-text-color | Color | null | ツールバー ドロップダウン項目のテキストの色。dropdown-background から自動導出されます。 |
| $item-hover-background | Color | null | ツールバー ドロップダウン項目ホバー テストの色。プライマリ - item-hover-text-color を導出します。 |
| $item-hover-text-color | Color | null | ツールバー ドロップダウン項目ホバー テキストの色。dropdown-background または item-hover-background から自動導出されます。 |
| $item-focus-background | Color | null | ツールバー ドロップダウン項目 フォーカス背景色。プライマリ - item-focus-text-color を導出します。 |
| $item-focus-text-color | Color | null | ツールバー ドロップダウン項目フォーカス テキストの色。dropdown-background または item-focus-background から自動導出されます。 |
| $border-color | Color | null | ツールバーの下の境界線の色。 |
Pivot Data Selector テーマ 注: このコンポーネントには自動トークン導出機能はありません。 すべてのトークンは計算なしでスキーマに直接渡されます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
Highlight テーマ プライマリ トークン: - `$resting-background` - 静止状態の背景。 - `$active-background` - アクティブ状態の背景。 派生色はコントラストに合わせて自動計算されます。
アイコンの強調表示で アイコンの色と背景を変更します。
$my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-highlight-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $resting-background | Color | null | 静止状態の強調表示に使用される背景色。プライマリ - resting-color を導出します。 |
| $resting-color | Color | null | 静止状態の強調表示に使用されるテキストの色。resting-background から自動導出されます。 |
| $active-background | Color | null | アクティブ状態の強調表示に使用される背景色。プライマリ - active-color を導出します。 |
| $active-color | Color | null | アクティブ状態の強調表示に使用されるテキストの色。active-background から自動的に派生されます。 |
Contained Icon Button テーマ プライマリ トークン: - `$background` - contained icon button の背景色。 - `$foreground` - foreground (アイコン) の色。状態 foreground 色のフォールバックとして使用されます。background から自動導出されます。 - `$border-color` - 境界線の色。 派生色はコントラストに合わせて自動計算されます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | 使用するスキーマ マップまたは icon-button スキーマ。 |
| $background | Color | null | Contained icon button の背景色。プライマリ - foreground、hover-background、focus-background、active-background を導出します。 |
| $foreground | Color | null | 前景色 (アイコン) の色。background から自動導出されます。 |
| $shadow-color | Color | null | 影の色。focus-background から自動導出されます。 |
| $hover-background | Color | null | ホバー時の背景色。background から自動導出されます。 |
| $hover-foreground | Color | null | ホバー時の前景色。foreground または hover-background から自動導出されます。 |
| $focus-background | Color | null | フォーカス時の背景色。background から自動導出されます。 |
| $focus-foreground | Color | null | フォーカス時の前景色。foreground または focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス + ホバー時の背景色。focus-background から自動導出されます。 |
| $focus-hover-foreground | Color | null | フォーカス + ホバー時の前景色。foreground または focus-hover-background から自動導出されます。 |
| $active-background | Color | null | アクティブな時の背景色。background から自動導出されます。 |
| $active-foreground | Color | null | アクティブな時の前景色。foreground または active-background から自動導出されます。 |
| $border-radius | Length | null | アイコン ボタンの境界線の半径。 |
| $border-color | Color | null | 境界線の色。プライマリ - focus-border-color を導出します。 |
| $focus-border-color | Color | null | フォーカス時の境界線の色。foreground または border-color から自動導出されます。 |
| $disabled-background | Color | null | 無効時の背景色。background (bootstrap/indigo) から自動導出されます。 |
| $disabled-foreground | Color | null | 無効時の前景色。foreground または disabled-background から自動導出されます。 |
| $disabled-border-color | Color | null | 無効時の境界線の色。 |
| $size | Length | null | アイコン ボタンのサイズ。 |
Flat Icon Button テーマ プライマリ トークン: - `$foreground` - foreground (アイコン) の色。 - `$hover-background` - ホバー時の背景色。 - `$focus-background` - フォーカス時の背景色。 - `$active-background` - アクティブな時の背景色。 フラット アイコン ボタンの場合、foreground がプライマリ トークンになります。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | 使用するスキーマ マップまたは icon-button スキーマ。 |
| $background | Color | null | Flat icon button の背景色。 |
| $foreground | Color | null | 前景色 (アイコン) の色。プライマリ - hover/focus/active の background と foreground を導出します。 |
| $shadow-color | Color | null | 影の色。foreground (bootstrap) から自動導出されます。 |
| $hover-background | Color | null | ホバー時の背景色。プライマリ - hover-foreground を導出します。foreground から自動導出されます。 |
| $hover-foreground | Color | null | ホバー時の前景色。hover-background または foreground から自動導出されます。 |
| $focus-background | Color | null | フォーカス時の背景色。プライマリ - focus-foreground を導出します。foreground から自動導出されます。 |
| $focus-foreground | Color | null | フォーカス時の前景色。focus-background または foreground から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス + ホバー時の背景色。foreground または hover-background から自動導出されます。 |
| $focus-hover-foreground | Color | null | フォーカス + ホバー時の前景色。focus-hover-background または foreground から自動導出されます。 |
| $active-background | Color | null | アクティブな時の背景色。foreground から自動導出されます。 |
| $active-foreground | Color | null | アクティブな時の前景色。active-background、foreground、または hover-foreground から自動導出されます。 |
| $border-radius | Length | null | アイコン ボタンの境界線の半径。 |
| $border-color | Color | null | 境界線の色。 |
| $focus-border-color | Color | null | フォーカス時の境界線の色。foreground (indigo) から自動導出されます。 |
| $disabled-background | Color | null | 無効時の背景色。 |
| $disabled-foreground | Color | null | 無効時の前景色。foreground (bootstrap/indigo) から自動導出されます。 |
| $disabled-border-color | Color | null | 無効時の境界線の色。 |
| $size | Length | null | アイコン ボタンのサイズ。 |
Icon Button テーマ プライマリ トークン: - `$background` - icon button の背景色。 - `$hover-background` - ホバー時の背景色。 - `$focus-background` - フォーカス時の背景色。 - `$focus-hover-background` - フォーカス + ホバー時の背景色。 派生色はコントラストに合わせて自動計算されます。 アイコン ボタン コンポーネントのテーマ マップを生成します。
Use flat-icon-button-theme(), contained-icon-button-theme(), or outlined-icon-button-theme() instead.
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | 使用するスキーマ マップまたは icon-button スキーマ。 |
| $background | Color | null | アイコン ボタンの背景色。プライマリ - foreground を導出します。 |
| $foreground | Color | null | 前景色 (アイコン) の色。background から自動導出されます。 |
| $shadow-color | Color | null | アイコン ボタンの影の色。 |
| $hover-background | Color | null | ホバー時の背景色。プライマリ - hover-foreground を導出します。 |
| $hover-foreground | Color | null | ホバー時の前景色。hover-background から自動的に派生されます。 |
| $focus-background | Color | null | フォーカス時の背景色。プライマリ - focus-foreground を導出します。 |
| $focus-foreground | Color | null | フォーカス時の前景色。focus-background から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス + ホバー時の背景色。プライマリ - focus-hover-foreground を導出します。 |
| $focus-hover-foreground | Color | null | フォーカス + ホバー時の前景色。focus-hover-background から自動導出されます。 |
| $active-background | Color | null | アクティブな時の背景色。 |
| $active-foreground | Color | null | アクティブな時の前景色。 |
| $border-radius | Length | null | アイコン ボタンの境界線の半径。 |
| $border-color | Color | null | 境界線の色。 |
| $focus-border-color | Color | null | フォーカス時の境界線の色。 |
| $disabled-background | Color | null | 無効時の背景色。 |
| $disabled-foreground | Color | null | 無効時の前景色。 |
| $disabled-border-color | Color | null | 無効時の境界線の色。 |
| $size | Length | null | アイコン ボタンのサイズ。 |
Outlined Icon Button テーマ プライマリ トークン: - `$foreground` - foreground (アイコン) の色。 - `$hover-background` - ホバー時の背景色。 - `$focus-background` - フォーカス時の背景色。 - `$active-background` - アクティブな時の背景色。 アウトラインアイコンボタンの場合、foreground がプライマリ トークンになります。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | 使用するスキーマ マップまたは icon-button スキーマ。 |
| $background | Color | null | Outlined icon button の背景色。 |
| $foreground | Color | null | 前景色 (アイコン) の色。プライマリ - hover/focus/active の background、foreground、border を導出します。 |
| $shadow-color | Color | null | 影の色。focus-background (bootstrap) から自動導出されます。 |
| $hover-background | Color | null | ホバー時の背景色。プライマリ - hover-foreground を導出します。foreground から自動導出されます。 |
| $hover-foreground | Color | null | ホバー時の前景色。hover-background または foreground から自動導出されます。 |
| $focus-background | Color | null | フォーカス時の背景色。プライマリ - focus-foreground を導出します。foreground から自動導出されます。 |
| $focus-foreground | Color | null | フォーカス時の前景色。focus-background または foreground から自動導出されます。 |
| $focus-hover-background | Color | null | フォーカス + ホバー時の背景色。foreground または focus-background から自動導出されます。 |
| $focus-hover-foreground | Color | null | フォーカス + ホバー時の前景色。focus-hover-background または foreground から自動導出されます。 |
| $active-background | Color | null | アクティブな時の背景色。foreground から自動導出されます。 |
| $active-foreground | Color | null | アクティブな時の前景色。active-background または hover-foreground から自動導出されます。 |
| $border-radius | Length | null | アイコン ボタンの境界線の半径。 |
| $border-color | Color | null | 境界線の色。foreground から自動導出されます。 |
| $focus-border-color | Color | null | フォーカス時の境界線の色。foreground または active-background から自動導出されます。 |
| $disabled-background | Color | null | 無効時の背景色。 |
| $disabled-foreground | Color | null | 無効時の前景色。foreground (bootstrap/indigo) から自動導出されます。 |
| $disabled-border-color | Color | null | 無効時の境界線の色。border-color (bootstrap/indigo) から自動導出されます。 |
| $size | Length | null | アイコン ボタンのサイズ。 |
Icon テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。
アイコン色を変更します。
$my-icon-theme: icon-theme($color: orange);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-icon-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $color | Color | null | アイコンの色。 |
| $size | String | null | アイコンのサイズ。 |
| $disabled-color | Color | null | 無効のアイコン色。 |
File Input テーマ プライマリ トークン: - `$file-names-background` - ファイル名コンテナーの背景色。 - `$file-selector-button-background` - ファイル入力セレクター ボタンの背景色。 派生色はコントラストに合わせて自動計算されます。
フォーカスの境界線とラベルの色を変更します。
$my-file-input-theme: file-input-theme($file-names-foreground: #09f);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-file-input-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $file-names-background | Color | null | ファイル名コンテナーの背景色。プライマリ - すべての file-names のforeground を取得します。 |
| $file-names-background--focused | Color | null | フォーカス時のファイル名コンテナーの背景色。file-names-background から自動導出されます。 |
| $file-names-background--filled | Color | null | ファイル名コンテナーの背景色 (塗りつぶし時)。file-names-background から自動導出されます。 |
| $file-names-background--disabled | Color | null | ファイル名コンテナーの背景色 (無効時)。file-names-background から自動導出されます。 |
| $file-names-foreground | Color | null | ファイル名の色。file-names-background から自動導出されます。 |
| $file-names-foreground--focused | Color | null | ファイル名の色 (フォーカス時)。file-names-background--focused から自動導出されます。 |
| $file-names-foreground--filled | Color | null | ファイル名の色 (塗りつぶし時)。file-names-background--filled から自動導出されます。 |
| $file-names-foreground--disabled | Color | null | ファイル名の色 (無効時)。file-names-background--disabled から自動導出されます。 |
| $file-selector-button-background | Color | null | セレクター ボタンの背景色。プライマリ - すべてのセレクター ボタンの foreground 色を導出します。 |
| $file-selector-button-background--focused | Color | null | セレクター ボタンの背景色 (フォーカス時)。file-selector-button-background から自動導出されます。 |
| $file-selector-button-background--filled | Color | null | セレクター ボタンの背景色 (塗りつぶし時)。file-selector-button-background から自動導出されます。 |
| $file-selector-button-background--disabled | Color | null | セレクター ボタンの背景色 (無効時)。file-selector-button-background から自動導出されます。 |
| $file-selector-button-foreground | Color | null | セレクター ボタンの foreground 色。file-selector-button-background から自動導出されます。 |
| $file-selector-button-foreground--focused | Color | null | セレクター ボタンの foreground 色 (フォーカス時)。file-selector-button-background--focused から自動導出されます。 |
| $file-selector-button-foreground--filled | Color | null | セレクター ボタンの foreground 色 (塗りつぶし時)。file-selector-button-background--filled から自動導出されます。 |
| $file-selector-button-foreground--disabled | Color | null | セレクター ボタンの foreground 色 (無効時)。file-selector-button-background--disabled から自動導出されます。 |
Input Group テーマ プライマリ トークン: - `$box-background` - Box タイプの入力の背景。 - `$search-background` - Search タイプの入力の背景。 - `$border-color` - border/fluent タイプの境界線の色。 - `$idle-bottom-line-color` - 下の線の色 (material)。 - `$focused-border-color` - フォーカス状態のアクセント色。 Material バリアントの場合、box タイプの入力に `$box-background` を設定します。
フォーカスの境界線とラベルの色を変更します。
$my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-input-group-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $idle-text-color | Color | null | アイドル状態の入力テキストの色。box/search-background から自動導出されます。 |
| $filled-text-color | Color | null | 塗りつぶされた状態の入力テキストの色。box/search-background から自動導出されます。 |
| $filled-text-hover-color | Color | null | ホバー時の塗りつぶされた状態の入力テキストの色。 |
| $focused-text-color | Color | null | フォーカスした状態の入力テキストの色。box-background-focus または search-background から自動導出されます。 |
| $disabled-text-color | Color | null | 無効な状態の入力テキストの色。disabled background から自動導出されます。 |
| $helper-text-color | Color | null | ヘルパーのテキストの色。 |
| $text-error-color | Color | null | エラー メッセージに使用される色。 |
| $icon-error-color | Color | null | エラー アイコンに使用される色。 |
| $input-prefix-color | Color | null | アイドル状態の入力プレフィックスの色。box/search-background から自動導出されます。 |
| $input-prefix-background | Color | null | アイドル状態の入力プレフィックスの背景色。suffix-background と同期します。 |
| $input-prefix-color--filled | Color | null | 塗りつぶされた状態の入力プレフィックスの色。prefix-color または background から自動導出されます。 |
| $input-prefix-background--filled * | Color | - | 塗りつぶされた状態の入力プレフィックスの背景色。 |
| $input-prefix-color--focused | Color | null | フォーカス状態の入力プレフィックスの色。prefix-color--filled または background から自動導出されます。 |
| $input-prefix-background--focused | Color | null | フォーカス状態の入力プレフィックスの背景色。 |
| $input-suffix-color | Color | null | アイドル状態の入力サフィックスの色。box/search-background から自動導出されます。prefix-color と同期します。 |
| $input-suffix-background | Color | null | アイドル状態の入力サフィックスの背景色。prefix-background と同期します。 |
| $input-suffix-color--filled | Color | null | 塗りつぶされた状態の入力サフィックスの色。 |
| $input-suffix-background-filled | Color | null | 塗りつぶされた状態の入力サフィックスの背景色。 |
| $input-suffix-color--focused | Color | null | フォーカス状態の入力サフィックスの色。 |
| $input-suffix-background--focused | Color | null | フォーカス状態の入力サフィックスの背景色。 |
| $idle-secondary-color | Color | null | アイドル状態のラベルの色。box-background または placeholder-color から自動導出されます。 |
| $focused-secondary-color | Color | null | フォーカスした状態のラベルの色。focused-bottom-line-color または focused-border-color から自動導出されます。 |
| $idle-bottom-line-color | Color | null | アイドル状態の下線と境界線の色。material bottom line の場合はプライマリです。 |
| $hover-bottom-line-color | Color | null | ホバー状態の下線と境界線の色。idle-bottom-line-color から自動導出されます。 |
| $focused-bottom-line-color | Color | null | フォーカスした状態の下線と境界線の色。hover-bottom-line-color から自動導出されます。 |
| $disabled-bottom-line-color | Color | null | 無効な状態の下線と境界線の色。 |
| $border-color | Color | null | Border および fluent 型の入力グループのための境界線の色。border 入力の場合はプライマリです。 |
| $hover-border-color | Color | null | Border および fluent 型の入力グループのためのホバー入力の境界線。border-color から自動導出されます。 |
| $focused-border-color | Color | null | Border および fluent 型の入力グループのためのフォーカスされた入力の境界線の色。hover-border-color から自動導出されます。 |
| $disabled-border-color | Color | null | Border および fluent 型の入力グループのための無効な境界線の色。 |
| $box-background | Color | null | Box 型の入力グループのための背景色。material box 入力の場合はプライマリです。 |
| $box-background-hover | Color | null | Box 型の入力グループのホバー時の背景色。box-background から自動導出されます。 |
| $box-background-focus | Color | null | Box 型の入力グループのフォーカス時の背景色。box-background から自動導出されます。 |
| $box-disabled-background | Color | null | 無効な状態の box 型の入力グループの背景色。box-background から自動導出されます。 |
| $border-background | Color | null | Border 型の入力グループのための色。 |
| $border-disabled-background | Color | null | 無効な状態の border 型の入力グループのための背景色。 |
| $search-background | Color | null | search 型の入力グループの背景色。search 入力の場合はプライマリです。 |
| $search-disabled-background | Color | null | 無効な状態の search 型の入力グループの背景色。search-background から自動導出されます。 |
| $search-resting-shadow | box-shadow | null | 静止状態の search 型の入力グループのための影付きの色。 |
| $search-hover-shadow | box-shadow | null | ホバー状態の search 型の入力グループのための影付きの色。 |
| $search-disabled-shadow | box-shadow | null | 無効な状態の search 型の入力グループのための影付きの色。 |
| $success-secondary-color | Color | null | 有効状態に使用する成功の色。 |
| $warning-secondary-color | Color | null | 警告状態に使用する警告色。 |
| $error-secondary-color | Color | null | エラー状態に使用するエラー色。 |
| $box-border-radius | List | null | ボックス入力のため使用される境界線の半径。 |
| $border-border-radius | List | null | 端入力のため使用される境界線の半径。 |
| $search-border-radius | List | null | 検索入力に使用される境界線の半径。 |
| $placeholder-color | Color | null | 入力グループのプレースホルダーの色。box/search-background から自動導出されます。 |
| $hover-placeholder-color | Color | null | ホバー時の入力グループのプレースホルダーの色。box-background-hover または placeholder-color から自動導出されます。 |
| $disabled-placeholder-color | Color | null | 無効の入力グループのプレースホルダーの色。disabled background から自動導出されます。 |
Date Time Input テーマ プライマリ トークン: - `$box-background` - Box タイプの入力の背景。 - `$search-background` - Search タイプの入力の背景。 - `$border-color` - border/fluent タイプの境界線の色。 - `$idle-bottom-line-color` - 下の線の色 (material)。 - `$focused-border-color` - フォーカス状態のアクセント色。 Material バリアントの場合、box タイプの入力に `$box-background` を設定します。
Label テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $color | Map | null | テキストの色。 |
| $disabled-color | Map | null | 無効なテキストの色。 |
List テーマ プライマリ トークン: - `$background` または `$item-background` - リスト/項目の背景。自動導出されるもの: header-background、item-background-hover、item-background-active、item-background-selected、すべての text/action/thumbnail の色。 派生色はコントラストに合わせて自動計算されます。
リストの背景色を変更します。
$my-list-theme: list-theme($background: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-list-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | リストの背景色。プライマリ - 設定しない場合は item-background を導出します。 |
| $header-background | Color | null | リスト ヘッダーの背景色。background または item-background から自動導出されます。 |
| $header-text-color | Color | null | リスト ヘッダーのテキストの色。header-background から自動導出されます。 |
| $item-background | Color | null | リスト項目の背景色。プライマリ - すべての項目の状態の色を導出します。 |
| $item-background-hover | Color | null | リスト項目ホバー 背景色。item-background から自動的に導出されます。 |
| $item-background-active | Color | null | アクティブ リスト項目の背景色。item-background-hover から自動導出されます。 |
| $item-background-selected | Color | null | 選択されたリスト項目の背景色。item-background-active から自動導出されます。 |
| $item-text-color | Color | null | リスト項目テキストの色。item-background から自動的に導出されます。 |
| $item-text-color-hover | Color | null | リスト項目ホバー テキストの色。item-background-hover から自動導出されます。 |
| $item-text-color-active | Color | null | アクティブ リスト項目テキストの色。item-background-active から自動導出されます。 |
| $item-text-color-selected | Color | null | 選択されたリスト項目のテキストの色。item-background-selected から自動導出されます。 |
| $item-title-color | Color | null | リスト項目タイトルの色。item-text-color から自動的に導出されます。 |
| $item-title-color-hover | Color | null | リスト項目ホバー タイトルの色。item-text-color-hover から自動導出されます。 |
| $item-title-color-active | Color | null | アクティブ リスト項目タイトルの色。item-text-color-active から自動導出されます。 |
| $item-title-color-selected | Color | null | 選択されたリスト項目のタイトルの色。item-text-color-selected から自動導出されます。 |
| $item-subtitle-color | Color | null | リスト項目サブタイトルの色。item-text-color (ミュート) から自動導出されます。 |
| $item-subtitle-color-hover | Color | null | リスト項目ホバー サブタイトルの色。item-text-color-hover (ミュート) から自動導出されます。 |
| $item-subtitle-color-active | Color | null | アクティブ リスト項目サブタイトルの色。item-text-color-active (ミュート) から自動導出されます。 |
| $item-subtitle-color-selected | Color | null | 選択されたリスト項目のサブタイトルの色。item-text-color-selected (ミュート) から自動導出されます。 |
| $item-action-color | Color | null | リスト項目アクションの色。item-text-color から自動的に導出されます。 |
| $item-action-color-hover | Color | null | リスト項目ホバー アクションの色。item-text-color-hover から自動導出されます。 |
| $item-action-color-active | Color | null | アクティブ リスト項目アクションの色。item-text-color-active から自動導出されます。 |
| $item-action-color-selected | Color | null | 選択されたリスト項目のアクションの色。item-text-color-selected から自動導出されます。 |
| $item-thumbnail-color | Color | null | リスト項目サムネイルの色。item-text-color から自動的に導出されます。 |
| $item-thumbnail-color-hover | Color | null | リスト項目ホバー サムネイルの色。item-text-color-hover から自動導出されます。 |
| $item-thumbnail-color-active | Color | null | アクティブ リスト項目サムネイルの色。item-text-color-active から自動導出されます。 |
| $item-thumbnail-color-selected | Color | null | 選択されたリスト項目のサムネイルの色。item-text-color-selected から自動導出されます。 |
| $border-radius | List | null | リスト コンポーネントに使用される境界線の半径。 |
| $item-border-radius | List | null | リスト項目に使用される境界線の半径。 |
| $border-width | Color | null | リストの境界線の幅。 |
| $border-color | Number | null | リストの境界線の色。item-background (fluent/bootstrap) から自動導出されます。 |
Navbar テーマ プライマリ トークン: - `$background` - ナビゲーション バーの背景色。 `$background` を設定するだけで、適切なコントラストを備えた完全なナビゲーション バー テーマが作成されます。
背景色を変更します。
$my-navbar-theme: navbar-theme($background: green);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-navbar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ナビゲーション バーの背景色。プライマリ - text-color と icon の色を導出します。 |
| $text-color | Color | null | ナビゲーション バーのテキストの色。background から自動導出されます。 |
| $border-color | Color | null | ナビゲーション バーの境界線の色。background (indigo) から自動導出します。 |
| $shadow | box-shadow | null | ナビゲーションバーの影。 |
| $idle-icon-color | Color | null | ナビゲーション バーのアイドル アイコンの色。background から自動導出されます。 |
| $hover-icon-color | Color | null | ナビゲーション バーのホバー アイコンの色。idle-icon-color または background から自動導出されます。 |
| $disable-shadow | Bool | true | ナビゲーション バーの影の表示状態を設定します。 |
Navigation Drawer テーマ プライマリ トークン: - `$background` - ドロワーの背景色。 - `$item-active-background` - アクティブな項目の背景。 派生色はコントラストに合わせて自動計算されます。
背景および項目の色を変更します。
$navdrawer-theme: navdrawer-theme( $background: #2d313a, $item-active-background: #ecc256, $item-icon-color: #ecc256);// css-vars() ミックスインへテーマを渡します。@include css-vars($navdrawer-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ナビゲーション ドロワーの背景色。プライマリ - すべての項目の色を導出します。 |
| $border-color | Color | null | ナビゲーション ドロワーの右境界線の色。 |
| $item-header-text-color | Color | null | ヘッダーのアイドル テキストの色。background から自動導出されます。 |
| $item-text-color | Color | null | 項目のアイドル テキストの色。background から自動導出されます。 |
| $item-icon-color | Color | null | 項目のアイコンの色。background から自動導出されます。 |
| $item-active-text-color | Color | null | 項目のアクティブ テキストの色。item-active-background から自動導出されます。 |
| $item-active-background | Color | null | 項目のアクティブの背景色。アクティブ状態にはプライマリ - アクティブなテキスト/アイコンを導出します。background から自動導出されます。 |
| $item-active-icon-color | Color | null | 項目のアイコン アクティブの色。item-active-background から自動導出されます。 |
| $item-hover-background | Color | null | 項目のホバーの背景色。background から自動導出されます。 |
| $item-hover-text-color | Color | null | 項目のホバー テキストの色。background から自動導出されます。 |
| $item-hover-icon-color | Color | null | 項目のホバー アイコンの色。background から自動導出されます。 |
| $item-disabled-text-color | Color | null | 項目の無効なテキストの色。background から自動導出されます (ミュート)。 |
| $item-disabled-icon-color | Color | null | 項目の無効なアイコンの色。background から自動導出されます (ミュート)。 |
| $shadow | Color | null | ドロワーに使用するカスタム影を設定します。 |
| $border-radius | List | null | ナビゲーション ドロワー コンポーネントに使用される境界線の半径。 |
| $item-border-radius | List | null | ナビゲーション ドロワーに使用される境界線の半径。 |
Overlay テーマ このテーマには自動トークン導出はありません。トークンは 1 つだけです: background-color。
背景色を変更します。
$my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));// css-vars() ミックスインへテーマを渡します。@include css-vars($my-overlay-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background-color | Color | null | モーダル オーバレイのために使用される背景色。 |
Paginator テーマ プライマリ トークン: - `$background-color` - ページネーターの背景。 派生色はコントラストに合わせて自動計算されます。
ストライプの色を変更します。
$my-paginator-theme: paginator-theme( $stripes-color: orange);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-paginator-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $text-color | Color | currentColor | テキストの色。background-color から自動導出されます。 |
| $background-color | Color | rgba(0, 0, 0, .04) | ページング パネルの背景色。プライマリ - text-color を導出します。 |
| $border-color | Color | rgba(0, 0, 0, .26) | ページング パネルの境界線の色。 |
Circular Progress テーマ このテーマには自動トークン導出はありません。すべての塗りつぶし色は独立しています。 fill-color-default は、グラデーション効果のために単一の色または 2 色のリストを受け付けます。
プログレス円の色を変更します。
$my-progress-circular-theme: progress-circular-theme( $fill-color-default: purple);// igx-progress-circular コンポーネント ミックスインへテーマを渡します。@include igx-progress-circular($my-progress-circle-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $base-circle-color | Color | null | 基本円の塗りつぶし色。 |
| $fill-color-default | Color | List<Color> | null | プログレス円の塗りつぶし色。単色またはグラデーション用の 2 色リストを指定できます。 |
| $fill-color-danger | Color | null | トラックの危険の塗りつぶし色。 |
| $fill-color-warning | Color | null | トラックの警告の塗りつぶし色。 |
| $fill-color-info | Color | null | トラックの情報の塗りつぶし色。 |
| $fill-color-success | Color | null | トラックの成功の塗りつぶし色。 |
| $text-color | Color | null | 値テキストの色。 |
| $diameter | Number | null | プログレス円の直径。 |
Linear Progress テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。 状態ベースの進行状況インジケーターには、セマンティック塗りつぶし色 (danger、warning、info、success) を使用します。
ストライプの色を変更します。
$my-progress-linear-theme: progress-linear-theme( $stripes-color: orange);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-progress-linear-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $track-color | Color | null | 主要トラックの色。 |
| $fill-color-default | Color | null | トラックのデフォルトの塗りつぶし色。 |
| $fill-color-danger | Color | null | トラックの危険の塗りつぶし色。 |
| $fill-color-warning | Color | null | トラックの警告の塗りつぶし色。 |
| $fill-color-info | Color | null | トラックの情報の塗りつぶし色。 |
| $fill-color-success | Color | null | トラックの成功の塗りつぶし色。 |
| $stripes-color | Color | null | トラックのストライプの色。 |
| $text-color | Color | null | トラック値テキストの色。 |
| $track-border-radius | List | null | プログレス バー トラックに使用される 0 から 8 までの境界線の半径の割合。 |
| $track-height | Number | null | リニア プログレスのトラックの高さ。 |
| $strip-size | Number | null | リニア プログレス バーのストリップの幅。 |
Query Builder Theme プライマリ トークン: - `$background` - 背景色。 - `$header-background` - ヘッダーの背景色。 - `$subquery-header-background` - サブクエリ ヘッダーの背景色。 - `$subquery-border-color` - サブクエリの境界線の色。 派生色はコントラストに合わせて自動計算されます。
カスタム クエリ ビルダーの色を設定します。
$my-query-builder-theme: query-builder-theme($background: red);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-query-builder-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | フィルタリング行の背景色。プライマリ - label-foreground、header-background を導出します。 |
| $header-background | Color | null | クエリ ビルダー ヘッダーの背景色。プライマリ - header-foreground、subquery-header-background を導出します。background から自動導出されます。 |
| $header-foreground | Color | null | クエリ ビルダー ヘッダーの前景色。header-background から自動導出されます。 |
| $header-border | Color | null | クエリ ビルダーの、ヘッダーの境界線の色。subquery-border-color から自動導出されます (bootstrap のみ)。 |
| $subquery-header-background | Map | null | サブクエリ ヘッダーの背景色。プライマリ - subquery-border-color を導出します。header-background から自動導出されます。 |
| $subquery-border-color | Map | null | クエリ ブロックの境界線の色。プライマリ - separator-color を導出します。subquery-header-background から自動導出されます。 |
| $separator-color | Map | null | クエリ ブロックのセパレーターの色。subquery-border-color から自動導出されます。 |
| $subquery-border-radius | Number | null | サブクエリ ブロックの境界線の半径。 |
| $label-foreground | Map | null | クエリ ビルダーのラベル "from" と "select" の色。background から自動導出されます。 |
| $border-radius | Number | null | クエリ ビルダーの境界線の半径。 |
| $color-expression-group-and | Color | null | 高度なフィルタリングの "AND" 条件グループの色。 |
| $color-expression-group-or | Color | null | 高度なフィルタリングの "OR" 条件グループの色。 |
Radio テーマ プライマリ トークン: - `$fill-color` - チェックされた状態の境界線とドットの色。 - `$empty-color` - チェックされていない境界線の色。 - `$error-color` - 無効な状態の色。 `$fill-color` を設定するだけで、チェックされたすべての状態のテーマが一貫して適用されます。
チェックされた点と境界線の色を変更します。
$my-radio-theme: radio-theme($fill-color: magenta);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-radio-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $label-color | Color | null | ラベル テキストに使用されるテキストの色。 |
| $label-color-hover | Color | null | ホバー時のラベル テキストに使用されるテキストの色。label-color から自動導出されます。 |
| $empty-color | Color | null | 未チェック境界線の色。チェックされていない状態の場合はプライマリです。 |
| $empty-fill-color | Color | null | 未チェックのラジオの塗りつぶし色。 |
| $fill-color | Color | null | チェックされた境界線と点の色。プライマリ - hover/focus の色を導出します。 |
| $disabled-color | Color | null | 無効にされた境界と点色。 |
| $disabled-label-color | Color | null | 無効のラベルの色。 |
| $disabled-fill-color | Color | null | 無効になっているチェック済みの境界線と点の色。 |
| $hover-color | Color | null | ホバー時の境界線と点の色。empty-color から自動導出されます。 |
| $fill-color-hover | Color | null | ホバー時のチェックされた点の色。fill-color から自動導出されます。 |
| $fill-hover-border-color | Color | null | ホバー時のチェックされた境界線の色。fill-color-hover から自動導出されます。 |
| $focus-border-color | Color | null | フォーカス境界線の色。fill-color (bootstrap) から自動導出されます。 |
| $focus-outline-color | Color | null | フォーカスのアウトラインの色。empty-color (indigo) または fill-color (bootstrap) から自動導出されます。 |
| $focus-outline-color-filled | Color | null | ラジオが塗りつぶされている場合のフォーカスのアウトラインの色。fill-color (indigo) から自動導出されます。 |
| $error-color | Color | null | 無効な状態のラベル、境界線、および点の色。エラー状態の場合はプライマリです。 |
| $error-color-hover | Color | null | ホバー時に無効な状態のラベル、境界線、および点の色。error-color から自動導出されます。 |
| $focus-outline-color-error | Color | null | 無効な状態のフォーカス アウトラインの色。error-color から自動導出されます。 |
Rating テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。 テキストベースのシンボルには、symbol-empty-color と symbol-full-color を使用してください。 画像/SVG ベースのシンボルには、symbol-empty-filter と symbol-full-filter を使用してください。
評価塗りつぶし記号の色を変更します。
$my-rating-theme: rating-theme($symbol-full-color: red);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-rating-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $label-color | Color | null | ラベルの色を設定します。 |
| $symbol-size | Number | null | シンボルのサイズ。 |
| $symbol-empty-color | Color | null | プレーン テキストの場合、シンボルのアイドル色を設定します。 |
| $symbol-full-color | Color | null | プレーン テキストの場合、選択状態のシンボルの色を設定します。 |
| $symbol-empty-filter | Color | null | 空のシンボルに使用されるフィルター。 |
| $symbol-full-filter | Color | null | 塗りつぶされたシンボルに使用されるフィルター。 |
| $disabled-label-color | Color | null | 無効な状態のラベルの色を設定します。 |
| $disabled-empty-symbol-color | Color | null | プレーン テキストの場合、シンボルのアイドル色を無効状態に設定します。 |
| $disabled-full-symbol-color | Color | null | プレーン テキストの場合、選択/無効状態のシンボルの色を設定します。 |
Ripple テーマ このテーマには自動トークン導出はありません。トークンは 1 つだけです: color。
色を変更します。
$my-ripple-theme: igx-ripple-theme($color: yellow);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-ripple-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $color | Color | null | リップルの色。 |
Scrollbar テーマ このテーマには自動トークン導出はありません。すべてのトークンは独立しています。 つまみ、トラック、角の要素を個別に設定します。
背景およびトラックの色を変更します。
$my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-scrollbar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Color | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $sb-size | String | Number | null | スクロールバーのサイズ。 |
| $sb-thumb-min-height | String | Number | null | つまみの最小の高さ。 |
| $sb-thumb-bg-color | Color | null | つまみの背景色。 |
| $sb-thumb-bg-color-hover | Color | null | つまみの :hover 背景色。 |
| $sb-thumb-border-color | Color | null | つまみの境界線の色。 |
| $sb-thumb-border-size | String | Number | null | つまみの境界線のサイズ。 |
| $sb-thumb-border-radius | String | Number | null | つまみの境界線の半径。 |
| $sb-track-bg-color | Color | null | トラックの背景色。 |
| $sb-track-bg-color-hover | Color | null | トラックの :hover 背景色。 |
| $sb-track-border-color | Color | null | トラックの境界線の色。 |
| $sb-track-border-size | String | Number | null | トラックの境界線のサイズ。 |
| $sb-corner-bg | Color | null | 角の背景色。 |
| $sb-corner-border-color | Color | null | 角の境界線の色。 |
| $sb-corner-border-size | String | Number | null | 角の境界線のサイズ。 |
テーマの選択 プライマリ トークン: - `$toggle-button-background` - トグル ボタンの背景。 トグル ボタンの色は、toggle-button-background からフォーカス状態まで段階的に変化します。
Select の空のリストの背景を変更します。
$my-select-theme: igx-select-theme($empty-list-background);// css-vars ミックスインへテーマを渡します。@include css-vars($my-select-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $toggle-button-background | Color | null | 選択トグル ボタンの背景色。プライマリ - すべてのトグル ボタンの色を導出します。 |
| $toggle-button-background-focus | Color | null | 選択がフォーカスされている時の選択トグル ボタンの背景色。toggle-button-background から自動導出されます (バリアントによって異なります)。 |
| $toggle-button-background-disabled | Color | null | 選択が無効になっている時の選択トグル ボタンの背景色。 |
| $toggle-button-foreground | Color | null | 選択トグル ボタンの前景色。toggle-button-background から自動導出されます。 |
| $toggle-button-foreground-focus | Color | null | 選択がフォーカスされている時の選択トグル ボタンの前景色。toggle-button-background-focus から自動導出されます (バリアントによって異なります)。 |
| $toggle-button-foreground-disabled | Color | null | 選択が無効になっている時の選択トグル ボタンの前景色。 |
| $toggle-button-foreground-filled | Color | null | 選択が塗りつぶされた時の選択トグル ボタンの前景色。toggle-button-background から自動導出されます。 |
| $toggle-button-background-focus--border | Color | null | マテリアル境界バリアントで選択がフォーカスされているときの選択トグル ボタンの背景色。toggle-button-background (bootstrap/indigo) から自動導出されます。 |
Slider テーマ プライマリ トークン: - `$track-color` - 塗りつぶされたトラックの色。 - `$base-track-color` - 塗りつぶされていないトラックの背景。 - `$thumb-color` - つまみの色 (material)。 派生色はコントラストに合わせて自動計算されます。
色にカスタム トラックとつまみを設定します。
$my-slider-theme: slider-theme($thumb-color: black, $track-color: yellow);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-slider-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $track-color | Color | null | トラックの色。プライマリ - hover、label、thumb の色を導出します。 |
| $track-step-color | Color | null | トラック ステップの色。base-track-color から自動導出されます。 |
| $track-step-size | Number | null | トラック ステップのサイズ。 |
| $track-hover-color | Color | null | ホバー時のトラックの色。track-color から自動導出されます。 |
| $thumb-color | Color | null | つまみの色。track-color (material) から自動導出されるか、個別に設定されます。 |
| $thumb-focus-color | Color | null | つまみのフォーカス色。thumb-border-color または thumb-color から自動導出されます。 |
| $thumb-border-color | Color | null | つまみの境界線の色。track-color (fluent/indigo) または thumb-color (bootstrap) から自動導出されます。 |
| $thumb-border-hover-color | Color | null | ホバー時のつまみの境界線の色。thumb-border-color から自動導出されます。 |
| $thumb-border-focus-color | Color | null | フォーカス時のつまみの境界線の色。 |
| $thumb-disabled-border-color | Color | null | つまみは無効に設定された場合の境界線の色。thumb-border-color から自動導出されます。 |
| $disabled-thumb-color | Color | null | 無効時のつまみの境界線の色。thumb-color から自動導出されます。 |
| $label-background-color | Color | null | バブル ラベルの背景色。track-color または thumb-color から自動導出されます。 |
| $label-text-color | Color | null | バブル ラベルのテキストの色。label-background-color から自動導出されます。 |
| $base-track-color | Color | null | トラックのベース背景色。塗りつぶされていないトラックの場合はプライマリです。track-color (material) から自動導出されます。 |
| $base-track-hover-color | Color | null | ホバー時のトラックのベース背景色。base-track-color から自動導出されます。 |
| $disabled-base-track-color | Color | null | トラックは無効に設定された場合のベース背景色。base-track-color から自動導出されます。 |
| $disabled-fill-track-color | Color | null | 無効時の塗りつぶしのトラックのベース背景色。track-color から自動導出されます。 |
| $tick-label-color | Color | null | 目盛りのラベル色。 |
| $tick-color | Color | null | 目盛りの背景色。 |
Snackbar テーマ プライマリ トークン: - `$background` - 背景色。 派生色はコントラストに合わせて自動計算されます。
カスタム背景色を設定します。
$my-snackbar-theme: snackbar-theme($background: white);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-snackbar-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | スナックバーに使用する背景色。プライマリ - text-color、button-color を導出します。 |
| $text-color | Color | null | スナックバーに使用するテキストの色。background から自動導出されます。 |
| $button-color | Color | null | スナックバーに使用するボタンの色。background から自動導出されます。 |
| $shadow | box-shadow | null | スナックバーに使用する影を設定します。 |
| $border-radius | List | null | スナックバーに使用する境界線の半径。 |
Splitter テーマ プライマリ トークン: - `$bar-color` - バーの背景色。 派生色はコントラストに合わせて自動計算されます。
カスタム エキスパンダーの色を設定します。
$my-splitter-theme: splitter-theme($expander-color: red);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-splitter-them);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $bar-color | Color | null | バーの背景色。プライマリ - handle、expander、focus の色を導出します。 |
| $handle-color | Color | null | バーのドラッグ ハンドルの色。bar-color から自動導出されます。 |
| $expander-color | Color | null | 矢印エクスパンダーの色。bar-color から自動導出されます。 |
| $border-radius | List | null | スプリッター バーのドラッグ ハンドルの境界線の半径。 |
| $focus-color | Color | null | フォーカスされたスプリッター バーに使用される色。bar-color から自動導出されます (バリアントによって異なります)。 |
| $bar-color-active | Color | null | バーが押された時の背景色。 |
| $handle-color-active | Color | null | バーのドラッグ ハンドルが押された時の色。 |
| $expander-color-active | Color | null | 矢印エクスパンダーが押された時の色。 |
| $size | Number | null | スプリッターのサイズ。垂直方向のスプリッターの場合、幅を返します。水平方向のスプリッターの場合、高さを返します。 |
Stepper テーマ プライマリ トークン: - `$step-background` - 基本ステップ背景。 - `$indicator-background` - ステップ インジケーターの背景。 - `$invalid-indicator-background` - 無効なステップ インジケーター。 - `$current-indicator-background` - 現在のステップ インジケーター。 - `$complete-indicator-background` - 完了したステップ インジケーター。 派生色はコントラストに合わせて自動計算されます。
カスタム ステッパーの色を設定します。
$my-stepper-theme: stepper-theme($step-hover-background: red);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-stepper-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $content-foreground | Color | null | ステップ コンテンツの前景。 |
| $step-background | Color | null | ステップ ヘッダーの背景。プライマリ - すべての step の状態を導出します。 |
| $step-hover-background | Color | null | ホバー時のステップ ヘッダーの背景。step-background から自動導出されます。 |
| $step-focus-background | Color | null | フォーカスされているステップ ヘッダーの背景。step-background から自動導出されます。 |
| $title-color | Color | null | ステップのタイトルの色。step-background から自動導出されます。 |
| $title-hover-color | Color | null | ホバー時のステップ タイトルの色。step-hover-background から自動導出されます。 |
| $title-focus-color | Color | null | フォーカスされているステップ タイトルの色。step-focus-background から自動導出されます。 |
| $subtitle-color | Color | null | ステップ サブタイトルの色。step-background から自動導出されます。 |
| $subtitle-hover-color | Color | null | ホバー時のステップ サブタイトルの色。step-hover-background から自動導出されます。 |
| $subtitle-focus-color | Color | null | フォーカスされているステップ サブタイトルの色。step-focus-background から自動導出されます。 |
| $indicator-color | Color | null | ステップ インジケーターのテキストの色。indicator-background から自動導出されます。 |
| $indicator-background | Color | null | ステップ インジケーターの背景色。プライマリ (インジケーター用) - indicator-color、indicator-outline を導出します。step-background から自動導出されます。 |
| $indicator-outline | Color | null | ステップ インジケーターのアウトラインの色。indicator-background から自動導出されます。 |
| $invalid-step-background | Color | null | 無効なステップ ヘッダーの背景。step-background から自動導出されます。 |
| $invalid-step-hover-background | Color | null | ホバー時の無効なステップ ヘッダーの背景。invalid-step-background から自動導出されます。 |
| $invalid-step-focus-background | Color | null | フォーカスされている無効なステップ ヘッダーの背景。invalid-step-background から自動導出されます。 |
| $invalid-title-color | Color | null | 無効なステップ タイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-title-hover-color | Color | null | ホバー時の無効なステップ タイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-title-focus-color | Color | null | フォーカスされている無効なステップ タイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-subtitle-color | Color | null | 無効なステップ サブタイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-subtitle-hover-color | Color | null | ホバー時の無効なステップ サブタイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-subtitle-focus-color | Color | null | フォーカスされている無効なステップ サブタイトルの色。invalid-indicator-background から自動導出されます。 |
| $invalid-indicator-color | Color | null | 無効なステップ インジケーターの色。invalid-indicator-background から自動導出されます。 |
| $invalid-indicator-background | Color | null | 無効なステップ インジケーターの背景色。プライマリ (invalid 状態用) |
| $invalid-indicator-outline | Color | null | 無効なステップ インジケーターのアウトラインの色。invalid-indicator-background から自動導出されます。 |
| $current-step-background | Color | null | 現在のステップ ヘッダーの背景。step-background から自動導出されます。 |
| $current-step-hover-background | Color | null | ホバー時の現在のステップ ヘッダーの背景。current-step-background から自動導出されます。 |
| $current-step-focus-background | Color | null | フォーカスされている現在のステップ ヘッダーの背景。current-step-background から自動導出されます。 |
| $current-title-color | Color | null | 現在のステップ タイトルの色。current-step-background から自動導出されます。 |
| $current-title-hover-color | Color | null | ホバー時の現在のステップ タイトルの色。current-step-hover-background から自動導出されます。 |
| $current-title-focus-color | Color | null | フォーカスされている現在のステップ タイトルの色。current-step-focus-background から自動導出されます。 |
| $current-subtitle-color | Color | null | 現在のステップ サブタイトルの色。current-step-background から自動導出されます。 |
| $current-subtitle-hover-color | Color | null | ホバー時の現在のステップ サブタイトルの色。current-step-hover-background から自動導出されます。 |
| $current-subtitle-focus-color | Color | null | 現在フォーカスされているステップ サブタイトルの色。current-step-focus-background から自動導出されます。 |
| $current-indicator-color | Color | null | 現在のステップ インジケーターの色。current-indicator-background から自動導出されます。 |
| $current-indicator-background | Color | null | 現在のステップ インジケーターの背景色。プライマリ (現在の状態用)current-step-background から自動導出されます。 |
| $current-indicator-outline | Color | null | 現在のステップ インジケーターのアウトラインの色。current-indicator-background から自動導出されます。 |
| $complete-step-background | Color | null | 完全なステップ ヘッダーの背景。step-background から自動導出されます。 |
| $complete-step-hover-background | Color | null | ホバー時の完全なステップ ヘッダーの背景。complete-step-background から自動導出されます。 |
| $complete-step-focus-background | Color | null | フォーカスされている完全なステップ ヘッダーの背景。complete-step-background から自動導出されます。 |
| $complete-title-color | Color | null | 完全なステップ タイトルの色。complete-step-background から自動導出されます。 |
| $complete-title-hover-color | Color | null | ホバー時の完全なステップ タイトルの色。complete-step-hover-background から自動導出されます。 |
| $complete-title-focus-color | Color | null | フォーカスされている完全なステップ タイトルの色。complete-step-focus-background から自動導出されます。 |
| $complete-subtitle-color | Color | null | 完全なステップ サブタイトルの色。complete-step-background から自動導出されます。 |
| $complete-subtitle-hover-color | Color | null | ホバー時の完全なステップ サブタイトルの色。complete-step-hover-background から自動導出されます。 |
| $complete-subtitle-focus-color | Color | null | フォーカスされているステップ サブタイトルの色。complete-step-focus-background から自動導出されます。 |
| $complete-indicator-color | Color | null | 完了したステップ インジケーターの色。complete-indicator-background から自動導出されます。 |
| $complete-indicator-background | Color | null | 完了したステップ インジケーターの背景色。プライマリ (complete 状態)complete-step-background から自動導出されます。 |
| $complete-indicator-outline | Color | null | 完了したステップ インジケーターのアウトラインの色。 |
| $disabled-title-color | Color | null | 無効なステップ タイトルの色。step-background から自動導出されます。 |
| $disabled-subtitle-color | Color | null | 無効なステップ サブタイトルの色。step-background から自動導出されます。 |
| $disabled-indicator-color | Color | null | 無効なステップのインジケーター色。disabled-indicator-background から自動導出されます。 |
| $disabled-indicator-background | Color | null | 無効なステップのインジケーター背景。step-background から自動導出されます。 |
| $disabled-indicator-outline | Color | null | 無効なステップのインジケーター アウトラインの色。disabled-indicator-background から自動導出されます。 |
| $step-separator-color | Color | null | ステップ間のセパレーターの境界線の色。step-background または indicator-background から自動導出されます。 |
| $complete-step-separator-color | Color | null | 完了したステップ間のセパレーターの境界線の色。 |
| $step-separator-style | Color | null | ステップ間のセパレーターの境界線スタイル。 |
| $complete-step-separator-style | Color | null | 完了したステップ間のセパレーターの境界線スタイル。 |
| $border-radius-indicator | List | null | ステップ インジケーターの境界線の半径。 |
| $border-radius-step-header | List | null | ステップ ヘッダーの境界線の半径。 |
Switch テーマ プライマリ トークン: - `$track-on-color` - ON 状態のトラック色。 - `$track-off-color` - OFF 状態のトラック色。 派生色はコントラストに合わせて自動計算されます。
色にカスタム トラックとつまみを設定します。
$my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-switch-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $thumb-on-color | Color | null | スイッチがオンの時のつまみの色。track-on-color (非 material) から自動導出、または track-on-color (material) との双方向導出されます。 |
| $track-on-color | Color | null | スイッチがオンの場合のトラックの色。プライマリ (ON 状態用) |
| $track-on-hover-color | Color | null | スイッチがオンおよびホバーした場合のトラックの色。track-on-color から自動導出されます。 |
| $thumb-off-color | Color | null | スイッチがオフの場合のつまみの色。track-off-color または border-color から自動導出されます。 |
| $thumb-off-hover-color | Color | null | スイッチがオフでホバーされている場合のつまみの色。thumb-off-color から自動導出されます。 |
| $track-off-color | Color | null | スイッチがオフの場合のトラックの色。プライマリ(OFF 状態用) |
| $thumb-disabled-color | Color | null | スイッチが無効にされた場合のつまみの色。thumb-off-color から自動導出されます。 |
| $thumb-on-disabled-color | Color | null | スイッチがオンおよび無効の場合のつまみの色。thumb-on-color から自動導出されます。 |
| $track-disabled-color | Color | null | スイッチが無効にされた場合のトラックの色。track-off-color から自動導出されます。 |
| $track-on-disabled-color | Color | null | スイッチがオンおよび無効の場合のトラックの色。track-on-color から自動導出されます。 |
| $label-color | Color | null | スイッチ ラベルの色。 |
| $label-hover-color | Color | null | ホバー時のスイッチ ラベルの色。 |
| $label-disabled-color | Color | null | スイッチが無効にされた場合のトラックの色。 |
| $resting-shadow | box-shadow | null | スイッチの静止状態で使用するつまみの影。 |
| $hover-shadow | box-shadow | null | スイッチのホバー状態で使用するつまみの影。 |
| $disabled-shadow | box-shadow | null | スイッチの無効状態で使用するつまみの影。 |
| $border-radius-track | List | null | スイッチのトラックに使用される境界線の半径。 |
| $border-radius-thumb | List | null | スイッチ サムに使用される境界線の半径。 |
| $border-radius-ripple | List | null | スイッチ リップルに使用される境界線の半径。 |
| $border-color | Color | null | スイッチの境界線の色。thumb-off-color から自動導出されます。 |
| $border-hover-color | Color | null | ホバー時のスイッチの境界線の色。track-off-color または border-color から自動導出されます。 |
| $border-disabled-color | Color | null | スイッチが無効になっているときの境界線の色。border-color から自動導出されます。 |
| $border-on-color | Color | null | スイッチがオンの時の境界線の色。track-on-color から自動導出されます。 |
| $border-on-hover-color | Color | null | スイッチがオンでマウスを置いたときの境界線の色。border-on-color から自動導出されます。 |
| $focus-outline-color | Color | null | フォーカスのアウトラインの色。border-color (indigo) または track-on-color (bootstrap) から自動導出されます。 |
| $focus-outline-color-focused | Color | null | フォーカスされた状態のフォーカス アウトラインの色。border-on-color (indigo) から自動導出されます。 |
| $focus-fill-color | Color | null | フォーカス塗りつぶし色。track-on-color (bootstrap) から自動導出されます。 |
| $focus-fill-hover-color | Color | null | ホバー時のフォーカス塗りつぶし色。focus-fill-color から自動導出されます。 |
Tabs テーマ プライマリ トークン: - `$item-background` - タブのヘッダーの背景。 - `$item-active-color` - アクティブなタブのテキストの色。 `$item-background` を設定するだけで、すべてのタブの状態のテーマが一貫して適用されます。
カスタム背景色を設定します。
$my-tabs-theme: tabs-theme( $item-background: orange );// css-vars() ミックスインへテーマを渡します。@include css-vars($my-tabs-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $item-text-color | Color | null | タブ テキストの色に使用する色。item-background から自動導出するか、item-icon-color と同期されます。 |
| $item-background | Color | null | タブ ヘッダーに使用する背景色。プライマリ - ほとんどの色を導出します。 |
| $item-hover-background | Color | null | ホバーされるタブに使用する背景。item-background から自動的に導出されます。 |
| $item-hover-color | Color | null | ホバーされるタブに使用するテキストの色。item-text-color または item-hover-background から自動導出されます。 |
| $item-icon-color | Color | null | タブ アイコンに使用する色。item-background から自動導出するか、item-text-color と同期されます。 |
| $item-active-icon-color | Color | null | アクティブなタブ アイコンに使用する色。item-active-color または item-active-background から自動導出されます。 |
| $item-active-hover-icon-color | Color | null | ホバーおよびフォーカス時のアクティブ タブ アイコンに使用される色。item-active-icon-color から自動導出されます。 |
| $item-hover-icon-color | Color | null | ホバー時のタブ アイコンに使用する色。item-icon-color または item-hover-background から自動導出されます。 |
| $item-disabled-icon-color | Color | null | 無効なタブ アイコンに使用する色。 |
| $item-active-color | Color | null | アクティブ タブ テキストに使用する色。プライマリ (アクティブ／インジケーター用) - インジケーターの色を導出します。 |
| $item-active-hover-color | Color | null | アクティブタブのテキストに使用される色 (ホバーおよびフォーカス時)。item-active-color から自動導出されます。 |
| $item-active-background | Color | null | アクティブなタブの背景に使用される色。item-background から自動的に導出されます。 |
| $item-active-hover-background | Color | null | アクティブタブの背景に使用される色 (ホバーおよびフォーカス時)。item-active-background から自動導出されます。 |
| $item-disabled-color | Color | null | 無効なタブ テキストに使用する色。 |
| $indicator-color | Color | null | アクティブ タブ インジケーターに使用する色。item-active-color から自動導出されます。 |
| $button-color | Color | null | ボタン アイコン/テキストの色に使用する色。button-background または item-text-color から自動導出されます。 |
| $button-hover-color | Color | null | ボタン アイコン/テキストはホバーされるときの色に使用する色。button-color または button-hover-background から自動導出されます。 |
| $button-disabled-color | Color | null | 無効なボタン アイコン/テキストに使用する色。button-color から自動導出されます。 |
| $button-background | Color | null | ボタンの背景に使用する色。item-background から自動的に導出されます。 |
| $button-hover-background | Color | null | ホバー時のボタン背景に使用される色。item-background または button-background から自動導出されます。 |
| $border-radius | List | null | タブの境界線の半径。 |
| $border-color | Color | null | タブの境界線の色。item-background (bootstrap) から自動導出されます。 |
| $border-color--hover | Color | null | ホバー時のタブの境界線の色。border-color から自動導出されます。 |
| $tab-ripple-color | Color | null | タブのリップル効果に使用される色。item-active-background または item-background から自動導出されます。 |
| $button-ripple-color | Color | null | ボタンのリップル効果に使用される色。button-color から自動導出されます。 |
Time Picker テーマ プライマリ トークン: - `$background-color` - ピッカー パネルの背景。 - `$selected-text-color` または `$active-item-background` - 選択された/アクティブなアクセント色。これらは互に、また header-background から導出します。 - `$header-background` - ヘッダーの背景。 派生色はコントラストに合わせて自動計算されます。
タイム ピッカーの背景とテキストの色を変更します。
$my-time-picker-theme: time-picker-theme( $text-color: white, $background-color: black);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-time-picker-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $text-color | Color | null | オープン タイム ピッカーのテキストの色。background-color から自動導出されます。 |
| $hover-text-color | Color | null | オープン タイム ピッカーのホバー テキストの色。text-color から自動導出されます。 |
| $selected-text-color | Color | null | タイム ピッカーの選択された項目のテキストの色。background-color または active-item-background から自動導出されます。 |
| $active-item-background | Color | null | タイム ピッカー内のフォーカスされた列の現在の項目の背景色。selected-text-color または background-color から自動導出されます。 |
| $active-item-foreground | Color | null | タイム ピッカー内のフォーカスされた列の現在の項目の前景色。active-item-background から自動導出されます。 |
| $disabled-text-color | Color | null | 無効な値のテキストの色。disabled-item-background から自動導出されます。 |
| $disabled-item-background | Color | null | 無効な値の背景色。 |
| $header-background | Color | null | タイム ピッカーのヘッダーの背景色。selected-text-color または background-color から自動導出されます。 |
| $header-hour-text-color | Color | null | タイム ピッカー時間テキストの色。header-background から自動導出されます。 |
| $background-color | Color | null | タイム ピッカー パネルの背景色。プライマリ - text、selected、active、border の色を導出します。 |
| $time-item-size | Number | null | タイム項目の高さ。 |
| $divider-color | Color | null | アクション領域の区切り線の色。border-color から自動導出されます。 |
| $border-color | Color | null | タイム ピッカーの周囲の境界線の色。background-color から自動導出されます。 |
| $modal-shadow | box-shadow | null | モーダル モードのタイムピッカーに使用されるカスタム影。 |
| $dropdown-shadow | box-shadow | null | ドロップダウン モードのタイムピッカーに使用されるカスタム影。 |
| $border-radius | List | null | ピッカーのアウトラインに使用される境界線の半径。 |
| $active-item-border-radius | List | null | 現在アクティブな項目のアウトラインに使用される境界線の半径（時、分、午後 / 午前）。 |
Toast テーマ プライマリ トークン: - `$background` - 背景色。 派生色はコントラストに合わせて自動計算されます。
カスタム背景色を設定します。
$my-toast-theme: toast-theme($background: green);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-toast-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | トーストに使用される背景。プライマリ - text-color、border-color を導出します。 |
| $text-color | Color | null | トーストに使用されるテキストの色。background から自動導出されます。 |
| $border-color | Color | null | トーストに使用される境界線の色。text-color から自動導出されます。 |
| $border-radius | List | null | トースト コンポーネントに使用される境界線の半径。 |
| $shadow | box-shadow | null | Toast に使用する影を設定します。 |
Tooltip テーマ プライマリ トークン: - `$background` - 背景色。 派生色はコントラストに合わせて自動計算されます。
ツールチップの背景を変更します。
$my-tooltip-theme: tooltip-theme($background: magenta);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-tooltip-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ツールチップの背景色。プライマリ - text-color を導出します。 |
| $text-color | Color | null | ツールチップのテキストの色。background から自動導出されます。 |
| $border-radius | List | null | ツールチップ コンポーネントに使用される境界線の半径。 |
| $shadow | box-shadow | null | Tooltip コンポーネントに使用する影を設定します。 |
Tree テーマ プライマリ トークン: - `$background` - ノードの背景。 - `$background-selected` - 選択されたノードの背景。 - `$background-active` - アクティブなノードの背景。 派生色はコントラストに合わせて自動計算されます。
ツリーの背景を変更する
$my-tree-theme: tree-theme($background: magenta);// css-vars() ミックスインへテーマを渡します。@include css-vars($my-tree-theme);| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $schema | Map | $light-material-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
| $background | Color | null | ツリー ノードに使用される背景色。プライマリ - すべての状態の色を導出します。 |
| $foreground | Color | null | ツリー ノード コンテンツに使用される色。background から自動導出されます。 |
| $icon-color | Color | null | ツリー ノード アイコンに使用される色。 |
| $background-selected | Color | null | 選択されたツリー ノードに使用される背景色。background から自動導出されます。 |
| $foreground-selected | Color | null | 選択したツリー ノードのコンテンツに使用される色。background-selected から自動導出されます。 |
| $background-active | Color | null | アクティブ ツリー ノードに使用される背景色。background から自動導出されます。 |
| $foreground-active | Color | null | アクティブ ツリー ノードのコンテンツに使用される色。background-active から自動導出されます。 |
| $background-active-selected | Color | null | アクティブな選択されたツリー ノードに使用される背景色。background-active から自動導出されます。 |
| $foreground-active-selected | Color | null | アクティブな選択されたツリー ノードのコンテンツに使用される色。background-active-selected から自動導出されます。 |
| $background-disabled | Color | null | 無効な状態のツリー ノードに使用される背景色。background から自動導出されます。 |
| $foreground-disabled | Color | null | 無効なツリー ノードのコンテンツに使用される色。background-disabled から自動導出されます。 |
| $drop-area-color | Color | null | ツリー ノード ドロップ aria に使用される背景色。 |
| $border-color | Color | null | フォーカス状態のツリー ノードに使用されるアウトラインの影の色。 |
| $hover-color | Color | null | ホバー時にツリー ノードに使用される背景色。background から自動導出されます。 |
| $hover-selected-color | Color | null | ホバー時に選択されたツリー ノードに使用される背景色。background-selected から自動導出されます。 |
Ignite UI コンポーネント テーマから CSS 変数トークンを生成します。 `$mode` パラメーターを介して 2 つのモードをサポートします。 **`'global'` (デフォルト):** `ig` プレフィックスが付いたユニバーサル CSS 変数トークンを生成します。 ローカル CSS 変数参照 (例: `var(--background)`) をグローバル トークン参照 (例: `var(--ig-avatar-background)`) に書き換えて、 `adaptive-contrast` や `dynamic-shade` などの導出された値がどのスコープでも正しく解決されるようにします。 - **制限:** 値に `sizable()` 式 (例: `size`) が含まれるプロパティは、コンポーネント スコープの変数 (`--is-large`、`--is-medium`、`--is-small`) を参照するときに、黙ってスキップされます。 これらの変数は、コンポーネント レベルで `sizable()` ミックスインによって設定され、グローバル スコープでは解決できません。 CSS カスタム プロパティは宣言スコープで解決されるため、`:root` の `sizable()` 式は常に最大サイズに評価されます。 `size` をグローバル トークンとしてオーバーライドするには、`sizable()` 式 の代わりに具体的な値 (例: `$size: 2rem`) を渡します。 - *注:** テーマ値が `adaptive-contrast()` 由来の色を参照する場合は、 `--y-contrast` 変数が使用できるように、トークンが 宣言されているスコープに `adaptive-contrast()` ミックスインが含まれていることを確認します。 **`'scoped'`:** 設定された `variable-prefix` (例: `igx`) を使用して、コンポーネント スコープの CSS 変数を生成します。 セレクターのスコープと `is-root()` 分岐を処理します。 グローバル トークンがコンポーネント スコープの変数をオーバーライドできるように、ユニバーサル `--ig-*` フォールバック チェーンが含まれています。 `--ig-theme` および `--ig-theme-variant` メタデータを出力します。
ユニバーサルアバタートークンを生成します (global モード)
:root { @include tokens(avatar-theme($background: red));}// Output:// :root {// --ig-avatar-background: red;// --ig-avatar-color: hsla(from color(from var(--ig-avatar-background) ...) ...);// ...// }具体的な値でサイズをオーバーライドします (global モード)
:root { @include tokens(avatar-theme($size: 2rem));}// Output:// :root {// --ig-avatar-size: 2rem;// ...// }スコープ付きコンポーネン トトークンを生成します (scoped モード)
@include tokens(avatar-theme($schema: $schema), $mode: 'scoped');カスタム スコープでスコープ付きコンポーネント トークンを生成します
@include tokens(dialog-theme($schema: $schema), $mode: 'scoped', $scope: '.igx-dialog');| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $theme * | Map | - | トークンを生成するコンポーネント テーマ マップです。 |
| $mode | String | 'global' | 生成モード: ユニバーサル トークンの場合は 'global'、コンポーネント レベルの CSS 変数の場合は 'scoped' です。 |
| $scope | String | null | 'scoped' モードでのみ使用されます。テーマ マップからのセレクターをオーバーライドします。 |
| $ignored | Map | $ignored-keys | トークンを生成するときに除外される無視キーワードのリスト。 |
テーマの色を CSS 変数として特定のスコープに追加します。
Use `tokens($theme, $mode: 'scoped')` instead.
グリッド テーマの色を CSS 変数に変換します。
$my-grid-theme grid-theme( $header-background: red, $content-background: #222);.my-grid { @include css-vars($my-grid-theme);}| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $theme * | map | - | 使用するコンポーネントのテーマ。 |
| $scope | map | null | 使用する CSS 変数のスコープ。(オプション) |
スコープがサイズの変更に対応できるように、必要な CSS プロパティを追加します。
例
.my-component { @include sizable();}