Ignite UI for Angular
コンポーネント 使用開始

themes

#

function sizable public コードを表示 open_in_new

コンポーネントのサイズに基づいて値を切り替えるために使用されます。 渡されたサイズは、比較する前に絶対値に変換されます。

例
--size: #{sizable(rem(40px), rem(64px), rem(88px))};
パラメーター
名前 型 デフォルト 説明
$sm *
Number
- コンポーネントのサイズが small の場合の優先値。
$md
Number
$sm コンポーネントのサイズが medium の場合の優先値。
$lg
Number
$md コンポーネントのサイズが large の場合の優先値。
#

function category-chart-theme public コードを表示 open_in_new

例
$custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
// css-vars ミックスインへテーマを渡します。
@include css-vars($custom-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 軸の目盛りに適用する太さを設定します。
必要条件
#

function data-chart-theme public コードを表示 open_in_new

例
$my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 フォント プロパティを設定します。
必要条件
#

function doughnut-chart-theme public コードを表示 open_in_new

例
$my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 選択されたスライスのストロークの太さを設定します。
必要条件
#

function linear-gauge-theme public コードを表示 open_in_new

例
$custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));
// css-vars ミックスインへテーマを渡します。
@include css-vars($custom-gauge-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 目盛を描画する際に使用するストロークの太さを設定します。
必要条件
#

function radial-gauge-theme public コードを表示 open_in_new

例
$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 針のピボット ポイントのアウトラインの色を設定します。
必要条件
#

function bullet-graph-theme public コードを表示 open_in_new

例
$my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 単一の実際値の要素を描画するときに使用するストロークの太さを設定します。
必要条件
#

function pie-chart-theme public コードを表示 open_in_new

例
$my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 の間の値。
必要条件
#

function shape-chart-theme public コードを表示 open_in_new

例
$my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-chart-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 軸のタイトルの周りのマージンを設定します。
必要条件
#

function sparkline-theme public コードを表示 open_in_new

例
$my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));
// css-vars ミックスインへテーマを渡します。
@include css-vars($my-sparkline-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$target
Map
'angular' テーマ変数のスコープを設定するときに使用するターゲット プラットフォーム。
$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 スパークラインの標準範囲ブラシを設定します。
必要条件
#

function action-strip-theme public コードを表示 open_in_new

背景色のみ指定した場合、テキスト/アイコンの色は自動的に比色に割り当てられます。

例

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 アクション アイコンに使用される色。
$background
Color
null Action Strip コンポーネントのコンテンツの背景に使用される色。
$actions-background
Color
null アクションの背景に使用される色。
$delete-action
Color
null Action Strip コンポーネントの削除アイコンに使用される色。
$actions-border-radius
List
null Action Strip コンポーネント内のアクション コンテナーに使用される境界半径。
#

function avatar-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は自動的にコントラスト色に割り当てられます。

例

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 コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$color
Color
null アバターで使用されるテキストの色。
$icon-color
Color
null アバターに使用されるアイコンの色。
$background
Color
null アバターの背景色。
$border-radius
Number
null アバターで使用される境界線の半径。
$size
Number
null アバターのサイズ。
必要条件
#

function badge-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。

例

バッジのアイコンとテキストの色を変更します。

$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 使用されるアイコンの色。
$text-color
Color
null 使用されるテキストの色。
$border-color
Color
null 境界線の色。
$background-color
Color
null 使用される背景色。
$shadow
box-shadow
null バッジに使用する影を設定します。
$border-radius
Number
null バッジ コンポーネントに使用される境界線の半径の割合。
$size
Number
null バッジ コンポーネントのサイズ。
$dot-size
Number
null ドット型バッジのサイズ。
必要条件
#

function banner-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。

例

バナーの背景を変更します。

$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 バナーの背景に使用される色。
$banner-message-color
Color
null バナーのラベルに使用される色。
$banner-border-color
Color
null バナーの境界線に使用される色。
$banner-illustration-color
Color
null バナーのイラストに使用される色。
$border-radius
Number
null バナーの境界線の半径。
必要条件
#

function bottom-nav-theme public コードを表示 open_in_new

背景色のみを指定した場合、 ラベルとアイコンの色は自動的に対照的な色に割り当てられます。

例

カスタム背景色を設定します。

$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
Color
null アイドル状態に使用されるラベルの色。
$icon-color
Color
null アイドル状態に使用されるアイコンの色。
$label-selected-color
Color
null 選択状態に使用されるラベルの色。
$icon-selected-color
Color
null 選択状態に使用されるアイコンの色。
$icon-disabled-color
Color
null アイコンの無効な色。
$label-disabled-color
Color
null ラベルの無効な色。
$border-color
Color
null 下部のナビゲーションの境界線の色。
$shadow
box-shadow
null バーに使用する影を設定します。
必要条件
#

function button-group-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効にされた状態の色には適用しません。

例

背景、テキストおよび境界線の色を変更します。

$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-icon-color
color
null ボタン グループ項目のアイコンの色。
$item-background
Color
null ボタン グループ項目の背景色。
$item-border-color
Color
null ボタン グループ項目の間の境界色。
$item-hover-text-color
Color
null ボタン グループ項目のホバーテキストの色。
$item-hover-icon-color
Color
null ボタン グループ項目のホバー アイコンの色。
$item-hover-background
Color
null ボタン グループ項目のホバー背景色。
$item-hover-border-color
Color
null ボタン グループ項目間のホバー境界線の色。
$item-focused-text-color
Color
null ボタングループ項目のフォーカスされているテキストの色。
$item-focused-background
Color
null ボタン グループ項目のフォーカス背景色。
$item-focused-border-color
Color
null ボタン グループの項目のフォーカス境界線の色。
$item-focused-hover-background
Color
null ボタン グループ項目のフォーカスおよびホバー背景色。
$idle-shadow-color
Color
null フォーカス状態にあるボタン グループ項目のアウトラインの色。
$selected-shadow-color
Color
null フォーカス状態にある/選択されているボタン グループ項目のアウトラインの色。
$disabled-text-color
Color
null ボタン グループの無効にされた項目のためのテキスト/アイコン色。
$disabled-background-color
Color
null ボタン グループの無効にされた項目のための背景色。
$item-disabled-border
Color
null ボタン グループの無効にされた項目のための境界線の色。
$item-selected-text-color
Color
null ボタン グループの選択された項目のためのテキスト/アイコン色。
$item-selected-icon-color
Color
null ボタン グループの選択された項目のためのアイコンの色。
$item-selected-background
Color
null ボタン グループの選択された項目のための背景色。
$item-selected-border-color
Color
null ボタン グループの選択された項目の境界線の色。
$item-selected-hover-text-color
Color
null ボタン グループ内のホバー状態で選択されている項目のテキストの色。
$item-selected-hover-icon-color
Color
null ボタン グループ内のホバー状態で選択されている項目のアイコンの色。
$item-selected-hover-background
Color
null ボタン グループ内のホバー状態で選択された項目の背景色。
$item-selected-hover-border-color
Color
null ボタン グループ内のホバー状態で選択されている項目の境界線の色。
$item-selected-focus-background
Color
null ボタン グループ内のフォーカス状態で選択された項目の背景色。
$item-selected-focus-hover-background
Color
null ボタン グループ内のフォーカス状態およびホバー状態で選択された項目の背景色。
$disabled-selected-text-color
Color
null ボタン グループで選択された項目の無効なテキストの色。
$disabled-selected-icon-color
Color
null ボタン グループで選択された項目の無効なアイコンの色。
$disabled-selected-background
Color
null ボタン グループで選択された項目の無効な背景色。
$disabled-selected-border-color
Color
null ボタン グループから選択された項目の無効な境界線の色。
$border-radius
List
null ボタン グループ コンポーネントに使用される境界線の半径。
必要条件
#

function button-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効な状態の色には適用しません。

例

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
Color
null ボタンのテキストの色。
$icon-color
Color
null ボタンのアイコンの色。
$icon-color-hover
Color
null ホバー時のボタンのアイコンの色。
$hover-background
Color
null ボタンのホバー背景色。
$hover-foreground
Color
null ボタンのホバー テキストの色。
$focus-background
Color
null ボタンのフォーカス背景色。
$focus-foreground
Color
null ボタンのフォーカス テキストの色。
$focus-hover-background
Color
null ボタンのフォーカス時のホバー状態の背景色。
$focus-hover-foreground
Color
null ボタンのフォーカス時のホバー状態のテキストの色。
$focus-visible-background
Color
null ボタンのフォーカス表示の背景色。
$focus-visible-foreground
Color
null ボタンのフォーカス表示テキストの色。
$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 ボタンのフォーカス表示境界線の色。
$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 ボタンの無効な境界線の色。
必要条件
#

function contained-button-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効な状態の色には適用しません。

例

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
Color
null ボタンのテキストの色。
$icon-color
Color
null ボタンのアイコンの色。
$icon-color-hover
Color
null ホバー時のボタンのアイコンの色。
$hover-background
Color
null ボタンのホバー背景色。
$hover-foreground
Color
null ボタンのホバー テキストの色。
$focus-background
Color
null ボタンのフォーカス背景色。
$focus-foreground
Color
null ボタンのフォーカス テキストの色。
$focus-hover-background
Color
null ボタンのフォーカス時のホバー状態の背景色。
$focus-hover-foreground
Color
null ボタンのフォーカス時のホバー状態のテキストの色。
$focus-visible-background
Color
null ボタンのフォーカス表示の背景色。
$focus-visible-foreground
Color
null ボタンのフォーカス表示テキストの色。
$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 ボタンのフォーカス表示境界線の色。
$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 ボタンの無効な境界線の色。
必要条件
#

function fab-button-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効な状態の色には適用しません。

例

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
Color
null ボタンのテキストの色。
$icon-color
Color
null ボタンのアイコンの色。
$icon-color-hover
Color
null ホバー時のボタンのアイコンの色。
$hover-background
Color
null ボタンのホバー背景色。
$hover-foreground
Color
null ボタンのホバー テキストの色。
$focus-background
Color
null ボタンのフォーカス背景色。
$focus-foreground
Color
null ボタンのフォーカス テキストの色。
$focus-hover-background
Color
null ボタンのフォーカス時のホバー状態の背景色。
$focus-hover-foreground
Color
null ボタンのフォーカス時のホバー状態のテキストの色。
$focus-visible-background
Color
null ボタンのフォーカス表示の背景色。
$focus-visible-foreground
Color
null ボタンのフォーカス表示テキストの色。
$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 ボタンのフォーカス表示境界線の色。
$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 ボタンの無効な境界線の色。
必要条件
#

function flat-button-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効な状態の色には適用しません。

例

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 ボタンのテキストの色。
$icon-color
Color
null ボタンのアイコンの色。
$icon-color-hover
Color
null ホバー時のボタンのアイコンの色。
$hover-background
Color
null ボタンのホバー背景色。
$hover-foreground
Color
null ボタンのホバー テキストの色。
$focus-background
Color
null ボタンのフォーカス背景色。
$focus-foreground
Color
null ボタンのフォーカス テキストの色。
$focus-hover-background
Color
null ボタンのフォーカス時のホバー状態の背景色。
$focus-hover-foreground
Color
null ボタンのフォーカス時のホバー状態のテキストの色。
$focus-visible-background
Color
null ボタンのフォーカス表示の背景色。
$focus-visible-foreground
Color
null ボタンのフォーカス表示テキストの色。
$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 ボタンのフォーカス表示境界線の色。
$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 ボタンの無効な境界線の色。
必要条件
#

function outlined-button-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効な状態の色には適用しません。

例

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 ボタンのテキストの色。
$icon-color
Color
null ボタンのアイコンの色。
$icon-color-hover
Color
null ホバー時のボタンのアイコンの色。
$hover-background
Color
null ボタンのホバー背景色。
$hover-foreground
Color
null ボタンのホバー テキストの色。
$focus-background
Color
null ボタンのフォーカス背景色。
$focus-foreground
Color
null ボタンのフォーカス テキストの色。
$focus-hover-background
Color
null ボタンのフォーカス時のホバー状態の背景色。
$focus-hover-foreground
Color
null ボタンのフォーカス時のホバー状態のテキストの色。
$focus-visible-background
Color
null ボタンのフォーカス表示の背景色。
$focus-visible-foreground
Color
null ボタンのフォーカス表示テキストの色。
$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 ボタンのフォーカス表示境界線の色。
$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 ボタンの無効な境界線の色。
必要条件
#

function calendar-theme public コードを表示 open_in_new

ヘッダーの背景色のみを指定した場合、その色は、 すべてのアクセント付き要素の先頭色として使用されます: - 現在の日付の色 - 選択された日付の背景色 - ピッカー要素のホバーの色 - 年/月ホバー/選択済みの色 背景色のみを指定する場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。

例

ヘッダーとコンテンツの背景色を変更します。

$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 曜日ラベルの色。
$actions-divider-color
Color
null 日付ピッカー]アクションの区切り線の色。
$border-radius
List
null カレンダー コンテナーの境界線の半径。
$content-background
Color
null カレンダーの背景色。
$border-color
Color
null カレンダー コンテナーの境界線の色。
$header-background
Color
null ヘッダーの背景色。
$header-foreground
Color
null ヘッダーの前景色。
$picker-foreground
Color
null カレンダー ピッカーの前景。
$picker-background
Color
null カレンダー ピッカーの背景。
$picker-hover-foreground
Color
null :hover 時のカレンダー ピッカーの前景。
$picker-focus-foreground
Color
null :focus 時のカレンダー ピッカーの前景。
$navigation-color
Color
null 月移動ナビゲーションのアイコンの色。
$navigation-hover-color
Color
null :hover 時のナビゲーション アイコンの色。
$navigation-focus-color
Color
null :focus 時のナビゲーション アイコンの色。
$ym-border-radius
List
null 年/月ビューの境界線の半径。
$ym-hover-foreground
Color
null :hover 時の年/月の前景。
$ym-hover-background
Color
null :hover 時の年/月の背景。
$ym-current-outline-color
Color
null 現在の年/月のアウトラインの色。
$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-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
Color
null 選択された年/月の背景。
$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
Color
null 週番号列の背景。
$content-foreground
Color
null アイドル状態の日付の前景色。
$weekend-color
Color
null 週末の日付の色。
$inactive-color
Color
null 現在の月以外の日付の色。
$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 時の日付セルの背景。
$date-focus-background
Color
null :focus 時の日付セルの背景。
$date-hover-foreground
Color
null :hover 時の日付セルの前景。
$date-focus-foreground
Color
null :focus 時の日付セルの前景。
$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 選択された日付の背景。
$date-selected-foreground
Color
null 選択された日付の前景。
$date-selected-hover-background
Color
null :hover 時の選択された日付の背景。
$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 特別な日付の前景。
$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 選択範囲内の無効な日付の前景。
必要条件
#

function card-theme public コードを表示 open_in_new

例

背景色とコンテンツ テキストの色を変更します。

$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 カードのタイトルのテキストの色。
$subtitle-text-color
Color
null カードのサブタイトルのテキストの色。
$content-text-color
Color
null カードのコンテンツのテキストの色。
$actions-text-color
Color
null カード ボタンのテキストの色。
$resting-shadow
box-shadow
null レスティング状態のカードの影。
$hover-shadow
box-shadow
null ホバー状態のカードの影。
$border-radius
List
null カードに使用される 0 から 1 までの境界線の半径の割合。
必要条件
#

例

前へ/次へボタンの色を変更します。

$my-carousel-theme: carousel-theme(
  $button-background: black,
  $button-hover-background: white
);
// css-vars() ミックスインへ carousel-theme を渡します。
@include css-vars($my-carousel-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$slide-background
Color
null スライドの背景色。
$button-background
Color
null 前へ/次へボタンのアイドル背景色。
$button-hover-background
Color
null 前へ/次へボタンのホバー背景色。
$button-disabled-background
Color
null 前へ/次へボタンの無効な背景色。
$button-arrow-color
Color
null 前へ/次へボタンのアイドル矢印の色。
$button-hover-arrow-color
Color
null 前へ/次へボタンのホバー矢印の色。
$button-disabled-arrow-color
Color
null 前へ/次へボタンの無効な矢印の色。
$button-border-color
Color
null 前へ/次へボタンのアイドル状態の境界線の色。
$button-hover-border-color
Color
null 前へ/次へボタンのホバーの境界線の色。
$button-focus-border-color
Color
null フォーカス時のナビゲーション ボタンの境界線の色。
$button-disabled-border-color
Color
null 前へ/次へボタンの無効な境界線の色。
$indicator-background
Color
null インジケーター コンテナーの背景色。
$label-indicator-background
Color
null ラベル インジケーター コンテナーの背景色。
$indicator-dot-color
Color
null アイドル インジケーター点の色。
$indicator-hover-dot-color
Color
null ホバー インジケーターの点の色。
$indicator-focus-color
Color
null フォーカス時のインジケーターの境界線と点の色。
$indicator-border-color
Color
null アイドル インジケーター境界線の色。
$indicator-active-dot-color
Color
null アクティブ インジケーター点の色。
$indicator-active-border-color
Color
null アクティブ インジケーターの境界線の色。
$indicator-active-hover-dot-color
Color
null ホバー時のアクティブなインジケーターの点の色。
$button-shadow
box-shadow
null 前へ/次へボタンの下の影。
$border-radius
List
null カルーセル コンポーネントに使用される 0 から 1 までの境界線の半径。
必要条件
#

function chat-theme public コードを表示 open_in_new

Chat テーマ

例

背景色を変更します。

$my-chat-theme: chat-theme($background: blue);
// css-vars mixin へテーマを渡します。
@include css-vars($my-chat-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
必要条件
#

function checkbox-theme public コードを表示 open_in_new

チェックボックス テーマ

例

チェックされた塗りつぶし色を変更します。

$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 ホバー時のラベル テキストに使用されるテキストの色。
$empty-color
Color
null 未チェック境界線の色。
$empty-color-hover
Color
null ホバー時の未チェック境界線の色。
$empty-fill-color
Color
null 未チェックの塗りつぶし色。
$fill-color
Color
null チェックされた境界と塗りつぶし色。
$fill-color-hover
Color
null ホバー時にチェックされた境界線と塗りつぶしの色。
$tick-color
Color
null チェックされたマークの色。
$tick-color-hover
Color
null ホバー時にチェックされたマークの色。
$tick-width
Number
null チェックされたマークの幅。
$disabled-color
Color
null 無効にされた境界と塗りつぶし色。
$disabled-tick-color
Color
null 無効状態のチェック マークの色。
$disabled-indeterminate-color
Color
null 不確定な状態時の無効な境界線と塗りつぶし色。
$disabled-color-label
Color
null 無効のラベルの色。
$border-radius
List
null チェックボックス コンポーネントに使用される 0 から 1 までの境界線の半径。
$border-radius-ripple
List
null チェックボックスのリップルに使用される境界線の半径。
$focus-outline-color
Color
null フォーカスのアウトラインの色。
$focus-outline-color-focused
Color
null フォーカス状態のフォーカス アウトラインの色。
$focus-border-color
Color
null フォーカス境界線の色。
$error-color
Color
null 無効な状態の境界線と塗りつぶしの色。
$error-color-hover
Color
null ホバー時に無効な状態の境界線と塗りつぶしの色。
$focus-outline-color-error
Color
null フォーカス アウトライン エラーの色。 周りの領域が暗い場合は light に設定します。
必要条件
#

function chip-theme public コードを表示 open_in_new

チップ テーマ

例

背景色を変更します。

$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
Color
null チップの背景色。
$border-color
Color
null チップの境界線の色。
$disabled-text-color
Color
null 無効なチップのテキストの色。
$disabled-background
Color
null 無効なチップの背景色。
$disabled-border-color
Color
null 無効なチップの境界線の色。
$ghost-background
Color
null チップ ゴーストの背景色。
$ghost-shadow
box-shadow
null チップ ゴーストの影。
$hover-text-color
Color
null ホバー時のチップ テキストの色。
$hover-background
Color
null チップホバーの背景色。
$hover-border-color
Color
null チップ ホバーの境界線の色。
$focus-text-color
Color
null チップのテキストのフォーカスの色。
$focus-background
Color
null チップのフォーカスの背景色。
$focus-border-color
color
null チップのフォーカス境界線の色。
$selected-text-color
color
null 選択されたチップのテキストの色。
$selected-background
color
null 選択されたチップの背景色。
$selected-border-color
color
null 選択されたチップの境界線の色。
$hover-selected-text-color
color
null 選択されたチップのホバー テキストの色。
$hover-selected-background
color
null 選択されたチップのホバーの背景色。
$hover-selected-border-color
color
null 選択されたチップのホバー境界線の色。
$focus-selected-text-color
color
null 選択されたチップのテキスト フォーカスの色。
$focus-selected-background
color
null 選択されたチップのフォーカスの背景色。
$focus-selected-border-color
color
null 選択されたチップのフォーカス境界線の色。
$remove-icon-color
color
null チップの削除アイコンの色。
$remove-icon-color-focus
color
null チップのフォーカス削除アイコンの色。
必要条件
#

function column-actions-theme public コードを表示 open_in_new

列の操作テーマ

例

タイトルの色を変更します。

$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
Color
null パネルの背景色。
必要条件
#

function combo-theme public コードを表示 open_in_new

例

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
Color
null コンボ リストの背景色。
$toggle-button-background
Color
null コンボ トグル ボタンの背景色。
$toggle-button-background-focus
Color
null マテリアル ボックス バリアントでコンボがフォーカスされている時のコンボ トグル ボタンの背景色。
$toggle-button-background-focus--border
Color
null マテリアル境界バリアントでコンボがフォーカスされているときのコンボ トグル ボタンの背景色。
$toggle-button-background-disabled
Color
null コンボが無効になっているときのコンボ トグル ボタンの背景色。
$toggle-button-foreground
Color
null コンボ トグル ボタンの前景色。
$toggle-button-foreground-focus
Color
null コンボがフォーカスされている時のコンボ トグル ボタンの前景色。
$toggle-button-foreground-disabled
Color
null コンボが無効になっている時のコンボ トグル ボタンの前景色。
$toggle-button-foreground-filled
Color
null コンボが満たされた時のコンボ トグル ボタンの前景色。
$clear-button-background
Color
null コンボ クリア ボタンの背景色。
$clear-button-background-focus
Color
null コンボがフォーカスされている時のコンボ クリア ボタンの背景色。
$clear-button-foreground
Color
null コンボ クリア ボタンの前景色。
$clear-button-foreground-focus
Color
null コンボがフォーカスされている時のコンボ クリア ボタンの前景色。
必要条件
#

function date-range-picker-theme public コードを表示 open_in_new

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$label-color
color
null 日付範囲セパレーターのラベルの色。
#

function dialog-theme public コードを表示 open_in_new

ダイアログ テーマ

例

背景色を変更します。

$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
Color
null ダイアログ タイトル テキストの色。
$message-color
Color
null ダイアログ メッセージ テキストの色。
$shadow
box-shadow
null ダイアログに使用される影。
$border-radius
List
null ダイアログ コンポーネントに使用される境界線の半径。
$border-color
Color
null ダイアログ コンポーネントに使用される境界線の色。
必要条件
#

function divider-theme public コードを表示 open_in_new

例

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 ディバイダのインセット値。
必要条件
#

function dock-manager-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は自動的にコントラスト色に割り当てられます。

例

アイコン ドック マネージャーで背景とアイコンの色を変更します。

$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 ドック マネージャーのほとんどの要素のテキストの色を設定します。デフォルトのジョイスティック アイコンの色として使用されます。
必要条件
#

function drop-down-theme public コードを表示 open_in_new

Drop-down テーマを生成します。

例

ドロップダウンの背景色を変更します。

$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 ドロップダウンの背景色。
$header-text-color
Color
null ドロップダウン ヘッダー テキストの色。
$item-text-color
Color
null ドロップダウン項目のテキストの色。
$item-icon-color
Color
null ドロップダウン項目のアイコンの色。
$hover-item-text-color
Color
null ドロップダウン項目のホバーのテキストの色。
$hover-item-icon-color
Color
null ドロップダウン項目のホバーのアイコンの色。
$hover-item-background
Color
null ドロップダウン ホバー項目の背景色。
$focused-item-background
Color
null ドロップダウン フォーカスされた項目の背景色。
$focused-item-text-color
Color
null ドロップダウン フォーカスされた項目のテキストの色。
$focused-item-border-color
Color
null ドロップダウン項目のフォーカス境界線の色。
$selected-item-background
Color
null ドロップダウン選択された項目の背景色。
$selected-item-text-color
Color
null ドロップダウン選択された項目のテキストの色。
$selected-item-icon-color
Color
null 選択されたドロップダウン項目のアイコンの色。
$selected-hover-item-background
Color
null ドロップダウン選択された項目ホバーの背景色。
$selected-hover-item-text-color
Color
null ドロップダウン選択された項目ホバーのテキストの色。
$selected-hover-item-icon-color
Color
null 選択されたドロップダウン項目のホバーのアイコンの色。
$selected-focus-item-background
Color
null ドロップダウン選択された項目フォーカスの背景色。
$selected-focus-item-text-color
Color
null ドロップダウン選択された項目フォーカスのテキストの色。
$disabled-item-background
Color
null ドロップダウンが無効にされた項目の背景色。
$disabled-item-text-color
Color
null ドロップダウンが無効にされた項目のテキストの色。
$shadow
box-shadow
null ドロップダウンに使用する影を設定します。
$border-width
Number
null ドロップダウン コンポーネントに使用される境界線の幅。
$border-color
Color
null ドロップダウン コンポーネントに使用される 0 から 1 までの境界線の色。
$border-radius
List
null ドロップダウン コンポーネントに使用される境界線の半径。
$item-border-radius
List
null ドロップダウン項目に使用される境界の半径。
必要条件
#

function expansion-panel-theme public コードを表示 open_in_new

展開パネル テーマ

例

ヘッダーの背景色を変更します。

$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 パネル ヘッダーの背景色。
$header-focus-background
Color
null パネル ヘッダー フォーカスの背景色。
$header-title-color
Color
null パネル ヘッダー タイトル テキストの色。
$header-description-color
Color
null パネル ヘッダー 説明のテキストの色。
$header-icon-color
Color
null パネル ヘッダーのアイコンの色。
$body-color
Color
null パネル ボディ テキストの色。
$body-background
Color
null パネル ボディの背景色。
$disabled-text-color
Color
null パネルが無効なテキストの色。
$disabled-description-color
Color
null 無効になっているパネル ヘッダーの説明のテキストの色。
$expanded-margin
Number
null アコーディオン内に配置されたときの展開状態の展開パネルのマージン。
$border-radius
List
null 展開パネル コンポーネントに使用される 0 から 1 までの境界線の半径。
必要条件
#

function grid-summary-theme public コードを表示 open_in_new

例

集計の背景色およびラベル色を変更します。

$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 集計背景色は igx-grid__tfoot から継承します。
$label-color
Color
null 集計ラベルの色。
$result-color
Color
null 集計の結果/値の色。
$border-color
Color
null 集計の境界線の色。
$pinned-border-width
Color
null 集計パネルの境界線の幅。
$pinned-border-style
Color
null 集計パネルの境界線のスタイル。
$pinned-border-color
Color
null 集計パネルの境界線の色。
$label-hover-color
Color
null 集計のホバー ラベルの色。
必要条件
#

function grid-theme public コードを表示 open_in_new

例

ヘッダーの背景色を変更します。

$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
Color
null テーブル ヘッダー テキストの色。
$header-border-width
String
null ヘッダー境界線に使用される境界線の幅。
$header-border-style
String
null ヘッダー境界線に使用される境界線のスタイル。
$header-border-color
Color
null ヘッダー境界線に使用される色。
$header-selected-background
Color
null 選択時のテーブル ヘッダーの背景色 (列の選択など)。
$header-selected-text-color
Color
null 選択時のテーブル ヘッダーのテキストの色 (列の選択など)。
$sorted-header-icon-color
Color
null 並べ替え時の並べ替えアイコンの色
$sortable-header-icon-hover-color
color
null 列の並べ替えが可能な場合のグリッド ヘッダーのホバーのアイコンの色。
$content-background
Color
null テーブル ボディの背景色。
$content-text-color
Color
null テーブル ボディ テキストの色。
$ghost-header-text-color
Color
null ドラッグされたヘッダーテキストの色。
$ghost-header-icon-color
Color
null ドラッグされたヘッダー アイコンの色。
$ghost-header-background
Color
null ドラッグされたヘッダーの背景色。
$row-odd-background
Color
null 奇数行の背景色。
$row-even-background
Color
null 偶数行の背景色。
$row-odd-text-color
Color
null 奇数行テキストの色。
$row-even-text-color
Color
null 偶数行テキストの色。
$row-selected-background
Color
null 選択された行の背景色。
$row-selected-hover-background
Color
null 選択された行のホバーの背景色。
$row-selected-text-color
Color
null 選択された行のテキストの色。
$row-selected-hover-text-color
Color
null 選択された行のホバー テキストの色。
$row-hover-background
Color
null ホバー行の背景色。
$row-hover-text-color
Color
null ホバー行のテキストの色。
$row-border-color
Color
null 行の下の境界線の色。
$pinned-border-width
String
null ピン固定境界線の境界線の幅。
$pinned-border-style
String
null ピン固定境界線の CSS 境界線のスタイル。
$pinned-border-color
Color
null ピン固定境界線の色。
$cell-active-border-color
Color
null 現在アクティブな (フォーカスされている) セルの境界線の色。
$cell-selected-background
Color
null 選択されたセルの背景色。
$cell-selected-text-color
Color
null 選択されたセルのテキストの色。
$cell-editing-background
Color
null 編集されるセルの背景色。
$cell-editing-foreground
Color
null 編集モードのセルのテキストの色。
$cell-editing-focus-foreground
Color
null フォーカス時の編集モードのセルのテキストの色。
$cell-edited-value-color
Color
null 編集されたセルのテキストの色。
$cell-new-color
Color
null 編集されていない新しいセルのテキストの色。グリッドに新しい行を追加するときに使用されます。
$cell-disabled-color
Color
null 無効なセルのテキストの色。
$cell-selected-within-background
Color
null 選択した行/列内の選択したセルの背景。
$cell-selected-within-text-color
Color
null 選択した行/列内の選択したセルの色。
$edit-mode-color
Color
null 編集モード時に行/セルの周囲に適用される色。
$edited-row-indicator
Color
null 編集された行インジケーター行に適用される色。
$resize-line-color
Color
null テーブル ヘッダーのサイズ変更線の色。
$drop-indicator-color
Color
null 列をドラッグしたときに列間の線に適用される色。
$grouparea-background
Color
null グリッド グループ領域の背景色。
$grouparea-color
Color
null グリッド グループ領域の色。
$group-row-background
Color
null グリッド グループ行の背景色。
$group-row-selected-background
Color
null ドロップ色のドロップ領域の背景。
$group-label-column-name-text
Color
null グリッド グループ行名前のテキストの色。
$group-label-icon
Color
null グリッド グループ行アイコンの色。
$group-label-text
Color
null グリッド グループ行テキストの色。
$expand-all-icon-color
Color
null グリッド ヘッダーすべてのグループ行の展開のアイコンの色。
$expand-all-icon-hover-color
Color
null グリッド ヘッダーすべてのグループ行の展開のアイコン ホバーの色。
$expand-icon-color
Color
null グリッド行の展開アイコンの色。
$expand-icon-hover-color
Color
null グリッド行の展開アイコン ホバーの色。
$active-expand-icon-color
Color
null ドロップ色のドロップ領域の背景。
$active-expand-icon-hover-color
Color
null ドロップ色のドロップ領域の背景。
$group-count-background
Color
null グリッド グループの行数バッジの背景色。
$group-count-text-color
Color
null グリッド グループの行数バッジのテキストの色。
$drop-area-text-color
Color
null ドロップ領域テキストの色。
$drop-area-icon-color
Color
null ドロップ領域アイコンの色。
$drop-area-background
Color
null ドロップ領域の背景色。
$drop-area-on-drop-background
Color
null ドロップ色のドロップ領域の背景。
$filtering-header-background
Color
null フィルター済み列ヘッダーの背景色。
$filtering-header-text-color
Color
null フィルター済み列ヘッダーのテキストの色。
$filtering-row-background
Color
null フィルタリング行の背景色。
$filtering-row-text-color
Color
null フィルタリング行のテキストの色。
$excel-filtering-header-foreground
Color
null Excel スタイル フィルタリングのヘッダーのテキストの色。
$excel-filtering-subheader-foreground
Color
null Excel スタイル フィルタリングのソートと移動ヘッダーのテキストの色。
$excel-filtering-actions-foreground
Color
null Excel スタイル フィルタリング オプションのテキストの色。
$excel-filtering-actions-hover-foreground
Color
null ホバー/フォーカス状態の Excel スタイル フィルタリング オプションのテキストの色。
$excel-filtering-actions-disabled-foreground
Color
null 無効な状態の Excel スタイル フィルタリング オプションのテキストの色。
$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 列ドロップ領域に使用される境界線の半径。
必要条件
#

function grid-toolbar-theme public コードを表示 open_in_new

例

ツールバーの背景色を変更します。

$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
Color
null ツールバー タイトル テキストの色。
$dropdown-background
Color
null ツールバー ドロップダウンの背景色。
$item-text-color
Color
null ツールバー ドロップダウン項目のテキストの色。
$item-hover-background
Color
null ツールバー ドロップダウン項目ホバー テストの色。
$item-hover-text-color
Color
null ツールバー ドロップダウン項目ホバー テキストの色。
$item-focus-background
Color
null ツールバー ドロップダウン項目 フォーカス背景色。
$item-focus-text-color
Color
null ツールバー ドロップダウン項目フォーカス テキストの色。
$border-color
Color
null ツールバーの下の境界線の色。
必要条件
#

function pivot-data-selector-theme public コードを表示 open_in_new

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
#

function highlight-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキストの色は自動的に対比色に割り当てられます。

例

アイコンの強調表示で アイコンの色と背景を変更します。

$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
Color
null 静止状態の強調表示に使用されるテキストの色。
$active-background
Color
null アクティブ状態の強調表示に使用される背景色。
$active-color
Color
null アクティブ状態の強調表示に使用されるテキストの色。
必要条件
#

function contained-icon-button-theme public コードを表示 open_in_new

Icon button コンポーネントの contained バリアントのテーマ マップを生成します。

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema 使用するスキーマ マップまたは icon-button スキーマ。
$background
Color
null Contained icon button の背景色。
$foreground
Color
null 前景色 (アイコン) の色。
$shadow-color
Color
null アイコン ボタンの影の色。
$hover-background
Color
null ホバー時の背景色。
$hover-foreground
Color
null ホバー時の前景色。
$focus-background
Color
null フォーカス時の背景色。
$focus-foreground
Color
null フォーカス時の前景色。
$focus-hover-background
Color
null フォーカス + ホバー時の背景色。
$focus-hover-foreground
Color
null フォーカス + ホバー時の前景色。
$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 アイコン ボタンのサイズ。
必要条件
#

function flat-icon-button-theme public コードを表示 open_in_new

Icon button コンポーネントの flat バリアントのテーマ マップを生成します。

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema 使用するスキーマ マップまたは icon-button スキーマ。
$background
Color
null Flat icon button の背景色。
$foreground
Color
null 前景色 (アイコン) の色。
$shadow-color
Color
null アイコン ボタンの影の色。
$hover-background
Color
null ホバー時の背景色。
$hover-foreground
Color
null ホバー時の前景色。
$focus-background
Color
null フォーカス時の背景色。
$focus-foreground
Color
null フォーカス時の前景色。
$focus-hover-background
Color
null フォーカス + ホバー時の背景色。
$focus-hover-foreground
Color
null フォーカス + ホバー時の前景色。
$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 アイコン ボタンのサイズ。
必要条件
#

function icon-button-theme public コードを表示 open_in_new

Icon button コンポーネントのテーマ マップを生成します。

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema 使用するスキーマ マップまたは icon-button スキーマ。
$background
Color
null アイコン ボタンの背景色。
$foreground
Color
null 前景色 (アイコン) の色。
$shadow-color
Color
null アイコン ボタンの影の色。
$hover-background
Color
null ホバー時の背景色。
$hover-foreground
Color
null ホバー時の前景色。
$focus-background
Color
null フォーカス時の背景色。
$focus-foreground
Color
null フォーカス時の前景色。
$focus-hover-background
Color
null フォーカス + ホバー時の背景色。
$focus-hover-foreground
Color
null フォーカス + ホバー時の前景色。
$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 アイコン ボタンのサイズ。
必要条件
#

function outlined-icon-button-theme public コードを表示 open_in_new

Icon button コンポーネントの outlined バリアントのテーマ マップを生成します。

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema 使用するスキーマ マップまたは icon-button スキーマ。
$background
Color
null Outlined icon button の背景色。
$foreground
Color
null 前景色 (アイコン) の色。
$shadow-color
Color
null アイコン ボタンの影の色。
$hover-background
Color
null ホバー時の背景色。
$hover-foreground
Color
null ホバー時の前景色。
$focus-background
Color
null フォーカス時の背景色。
$focus-foreground
Color
null フォーカス時の前景色。
$focus-hover-background
Color
null フォーカス + ホバー時の背景色。
$focus-hover-foreground
Color
null フォーカス + ホバー時の前景色。
$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 アイコン ボタンのサイズ。
必要条件
#

function icon-theme public コードを表示 open_in_new

例

アイコン色を変更します。

$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 無効のアイコン色。
必要条件
#

function file-input-theme public コードを表示 open_in_new

例

フォーカスの境界線とラベルの色を変更します。

$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-background--focused
Color
null ファイル入力にフォーカスがあるときのファイル名コンテナーの背景色。
$file-names-background--filled
Color
null ファイル入力に値があるときのファイル名コンテナーの背景色。
$file-names-background--disabled
Color
null ファイル入力が無効なときのファイル名コンテナーの背景色。
$file-names-foreground
Color
null ファイル名の色。
$file-names-foreground--focused
Color
null ファイル入力にフォーカスがあるときのファイル名の色。
$file-names-foreground--filled
Color
null ファイル入力に値があるときのファイル名の色。
$file-names-foreground--disabled
Color
null ファイル入力が無効なときのファイル名の色。
$file-selector-button-background
Color
null ファイル入力セレクター ボタンの背景色。
$file-selector-button-background--focused
Color
null ファイル入力にフォーカスがあるときのセレクター ボタンの背景色。
$file-selector-button-background--filled
Color
null ファイル入力に値があるときのセレクター ボタンの背景色。
$file-selector-button-background--disabled
Color
null ファイル入力が無効なときのセレクター ボタンの背景色。
$file-selector-button-foreground
Color
null ファイル入力セレクター ボタンの前景色。
$file-selector-button-foreground--focused
Color
null ファイル入力にフォーカスがあるときのセレクター ボタンの前景色。
$file-selector-button-foreground--filled
Color
null ファイル入力に値があるときのセレクター ボタンの前景色。
$file-selector-button-foreground--disabled
Color
null ファイル入力が無効なときのセレクター ボタンの前景色。
#

function input-group-theme public コードを表示 open_in_new

例

フォーカスの境界線とラベルの色を変更します。

$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 アイドル状態の入力テキストの色。
$filled-text-color
Color
null 塗りつぶされた状態の入力テキストの色。
$filled-text-hover-color
Color
null ホバー時の塗りつぶされた状態の入力テキストの色。
$focused-text-color
Color
null フォーカスした状態の入力テキストの色。
$disabled-text-color
Color
null 無効な状態の入力テキストの色。
$helper-text-color
Color
null ヘルパーのテキストの色。
$text-error-color
Color
null エラー メッセージに使用される色。
$icon-error-color
Color
null エラー アイコンに使用される色。
$input-prefix-color
Color
null アイドル状態の入力プレフィックスの色。
$input-prefix-background
Color
null アイドル状態の入力プレフィックスの背景色。
$input-prefix-color--filled
Color
null 塗りつぶされた状態の入力プレフィックスの色。
$input-prefix-background--filled *
Color
- 塗りつぶされた状態の入力プレフィックスの背景色。
$input-prefix-color--focused
Color
null フォーカス状態の入力プレフィックスの色。
$input-prefix-background--focused
Color
null フォーカス状態の入力プレフィックスの背景色。
$input-suffix-color
Color
null アイドル状態の入力サフィックスの色。
$input-suffix-background
Color
null アイドル状態の入力サフィックスの背景色。
$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 アイドル状態のラベルの色。
$focused-secondary-color
Color
null フォーカスした状態のラベルの色。
$idle-bottom-line-color
Color
null アイドル状態の下線と境界線の色。
$hover-bottom-line-color
Color
null ホバー状態の下線と境界線の色。
$focused-bottom-line-color
Color
null フォーカスした状態の下線と境界線の色。
$disabled-bottom-line-color
Color
null 無効な状態の下線と境界線の色。
$border-color
Color
null Border および fluent 型の入力グループのための境界線の色。
$hover-border-color
Color
null Border および fluent 型の入力グループのためのホバー入力の境界線。
$focused-border-color
Color
null Border および fluent 型の入力グループのためのフォーカスされた入力の境界線の色。
$disabled-border-color
Color
null Border および fluent 型の入力グループのための無効な境界線の色。
$box-background
Color
null Box 型の入力グループのための背景色。
$box-background-hover
Color
null Box 型の入力グループのホバー時の背景色。
$box-background-focus
Color
null Box 型の入力グループのフォーカス時の背景色。
$box-disabled-background
Color
null 無効な状態の box 型の入力グループの背景色。
$border-background
Color
null Border 型の入力グループのための色。
$border-disabled-background
Color
null 無効な状態の border 型の入力グループのための背景色。
$search-background
Color
null Search 型の入力グループの背景色。
$search-disabled-background
Color
null 無効な状態の search 型の入力グループの背景色。
$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 入力グループのプレースホルダーの色。
$hover-placeholder-color
Color
null ホバー時の入力グループのプレースホルダーの色。
$disabled-placeholder-color
Color
null 無効の入力グループのプレースホルダーの色。
#

function label-theme public コードを表示 open_in_new

パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$color
Map
null テキストの色。
$disabled-color
Map
null 無効なテキストの色。
#

function list-theme public コードを表示 open_in_new

例

リストの背景色を変更します。

$my-list-theme: list-theme($background: black);
// css-vars() ミックスインへテーマを渡します。
@include css-vars($my-list-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$background
Color
null リストの背景色。
$header-background
Color
null リスト ヘッダーの背景色。
$header-text-color
Color
null リスト ヘッダー テキストの色。
$item-background
Color
null リスト項目の背景色。
$item-background-hover
Color
null リスト項目ホバー 背景色。
$item-background-active
Color
null アクティブ リスト項目の背景色。
$item-background-selected
Color
null 選択されたリスト項目の背景色。
$item-text-color
Color
null リスト項目テキストの色。
$item-text-color-hover
Color
null リスト項目ホバー テキストの色。
$item-text-color-active
Color
null アクティブ リスト項目テキストの色。
$item-text-color-selected
Color
null 選択されたリスト項目のテキストの色。
$item-title-color
Color
null リスト項目タイトルの色。
$item-title-color-hover
Color
null リスト項目ホバー タイトルの色。
$item-title-color-active
Color
null アクティブ リスト項目タイトルの色。
$item-title-color-selected
Color
null 選択されたリスト項目のタイトルの色。
$item-subtitle-color
Color
null リスト項目サブタイトルの色。
$item-subtitle-color-hover
Color
null リスト項目ホバー サブタイトルの色。
$item-subtitle-color-active
Color
null アクティブ リスト項目サブタイトルの色。
$item-subtitle-color-selected
Color
null 選択されたリスト項目のサブタイトルの色。
$item-action-color
Color
null リスト項目アクションの色。
$item-action-color-hover
Color
null リスト項目ホバー アクションの色。
$item-action-color-active
Color
null アクティブ リスト項目アクションの色。
$item-action-color-selected
Color
null 選択されたリスト項目のアクションの色。
$item-thumbnail-color
Color
null リスト項目サムネイルの色。
$item-thumbnail-color-hover
Color
null リスト項目ホバー サムネイルの色。
$item-thumbnail-color-active
Color
null アクティブ リスト項目サムネイルの色。
$item-thumbnail-color-selected
Color
null 選択されたリスト項目のサムネイルの色。
$border-radius
List
null リスト コンポーネントに使用される境界線の半径。
$item-border-radius
List
null リスト項目に使用される境界線の半径。
$border-width
Color
null リストの境界線の幅。
$border-color
Number
null リストの境界線の色。
必要条件
#

function navbar-theme public コードを表示 open_in_new

例

背景色を変更します。

$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
Color
null ナビゲーション バーのテキストの色。
$border-color
Color
null ナビゲーション バーの境界線の色。
$shadow
box-shadow
null ナビゲーションバーの影。
$idle-icon-color
Color
null ナビゲーション バーのアイドル アイコンの色。
$hover-icon-color
Color
null ナビゲーション バーのホバー アイコンの色。
$disable-shadow
Bool
true ナビゲーション バーの影の表示状態を設定します。
必要条件
#

function navdrawer-theme public コードを表示 open_in_new

例

背景および項目の色を変更します。

$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 ヘッダーのアイドル テキストの色。
$item-text-color
Color
null 項目のアイドル テキストの色。
$item-icon-color
Color
null 項目のアイコンの色。
$item-active-text-color
Color
null 項目のアクティブ テキストの色。
$item-active-background
Color
null 項目のアクティブの背景色。
$item-active-icon-color
Color
null 項目のアイコン アクティブの色。
$item-hover-background
Color
null 項目のホバーの背景色。
$item-hover-text-color
Color
null 項目のホバー テキストの色。
$item-hover-icon-color
Color
null 項目のホバー アイコンの色。
$item-disabled-text-color
Color
null 項目の無効なテキストの色。
$item-disabled-icon-color
Color
null 項目の無効なアイコンの色。
$shadow
Color
null ドロワーに使用するカスタム影を設定します。
$border-radius
List
null ナビゲーション ドロワー コンポーネントに使用される境界線の半径。
$item-border-radius
List
null ナビゲーション ドロワーに使用される境界線の半径。
必要条件
#

function overlay-theme public コードを表示 open_in_new

例

背景色を変更します。

$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 モーダル オーバレイのために使用される背景色。
必要条件
#

function paginator-theme public コードを表示 open_in_new

グリッド ページング テーマ

例

ストライプの色を変更します。

$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
Color
rgba(0, 0, 0, .04) ページング パネルの背景色。
$border-color
Color
rgba(0, 0, 0, .26) ページング パネルの境界線の色。
必要条件
#

function progress-circular-theme public コードを表示 open_in_new

例

プログレス円の色を変更します。

$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 プログレス円の塗りつぶし色。
$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 プログレス円の直径。
必要条件
#

function progress-linear-theme public コードを表示 open_in_new

例

ストライプの色を変更します。

$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 リニア プログレス バーのストリップの幅。
必要条件
#

function query-builder-theme public コードを表示 open_in_new

例

カスタム クエリ ビルダーの色を設定します。

$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 フィルタリング行の背景色。
$header-background
Color
null クエリ ビルダー ヘッダーの背景色。
$header-foreground
Color
null クエリ ビルダー ヘッダーの前景色。
$header-border
Color
null クエリ ビルダーの、ヘッダーの境界線の色。
$subquery-header-background
Map
null サブクエリ ヘッダーの背景色。
$subquery-border-color
Map
null クエリ ブロックの境界線の色。
$separator-color
Map
null クエリ ビルダー ツリー ブロックのセパレーターの色。
$subquery-border-radius
Number
null サブクエリ ブロックの境界線の半径。
$label-foreground
Map
null クエリ ビルダーのラベル "from" と "select" の色。
$separator-color
Map
null クエリ ビルダー ツリー ブロックのセパレーターの色。
$border-radius
Number
null クエリ ビルダーの境界線の半径。
$color-expression-group-and
Color
null 高度なフィルタリングの "AND" 条件グループの色。
$color-expression-group-or
Color
null 高度なフィルタリングの "OR" 条件グループの色。
#

function radio-theme public コードを表示 open_in_new

例

チェックされた点と境界線の色を変更します。

$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 ホバー時のラベル テキストに使用されるテキストの色。
$empty-color
Color
null 未チェック境界線の色。
$empty-fill-color
Color
null 未チェックのラジオの塗りつぶし色。
$fill-color
Color
null チェックされた境界線と点の色。
$disabled-color
Color
null 無効にされた境界と点色。
$disabled-label-color
Color
null 無効のラベルの色。
$disabled-fill-color
Color
null 無効になっているチェック済みの境界線と点の色。
$hover-color
Color
null ホバー時の境界線と点の色。
$fill-color-hover
Color
null ホバー時のチェックされた点の色。
$fill-hover-border-color
Color
null ホバー時のチェックされた境界線の色。
$focus-border-color
Color
null フォーカス境界線の色。
$focus-outline-color
Color
null フォーカスのアウトラインの色。
$focus-outline-color-filled
Color
null ラジオが塗りつぶされている場合のフォーカスのアウトラインの色。
$error-color
Color
null 無効な状態のラベル、境界線、および点の色。
$error-color-hover
Color
null ホバー時に無効な状態のラベル、境界線、および点の色。
$focus-outline-color-error
Color
null 無効な状態のフォーカス アウトラインの色。
必要条件
#

function rating-theme public コードを表示 open_in_new

例

評価塗りつぶし記号の色を変更します。

$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 プレーン テキストの場合、選択/無効状態のシンボルの色を設定します。
必要条件
#

function ripple-theme public コードを表示 open_in_new

例

色を変更します。

$my-ripple-theme: igx-ripple-theme($color: yellow);
// css-vars() ミックスインへテーマを渡します。
@include css-vars($my-ripple-theme);
パラメーター
名前 型 デフォルト 説明
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$color
Color
null リップルの色。
必要条件
#

function scrollbar-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は自動的にコントラスト色に割り当てられます。

例

背景およびトラックの色を変更します。

$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 角の境界線のサイズ。
必要条件
#

function select-theme public コードを表示 open_in_new

例

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 Select トグル ボタンの背景色。
$toggle-button-background-focus
Color
null Select がフォーカスされている時の Select トグル ボタンの背景色。
$toggle-button-background-disabled
Color
null Select が無効になっている時の Select トグル ボタンの背景色。
$toggle-button-foreground
Color
null Select トグル ボタンの前景色。
$toggle-button-foreground-focus
Color
null Select がフォーカスされている時の Select トグル ボタンの前景色。
$toggle-button-foreground-disabled
Color
null Select が無効になっている時の Select トグル ボタンの前景色。
$toggle-button-foreground-filled
Color
null Select が塗りつぶされた時の Select トグル ボタンの前景色。
$toggle-button-background-focus--border
Color
null マテリアル境界バリアントで選択がフォーカスされているときの選択トグル ボタンの背景色。
必要条件
#

function slider-theme public コードを表示 open_in_new

例

色にカスタム トラックとつまみを設定します。

$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 トラックの色。
$track-step-color
Color
null トラック ステップの色。
$track-step-size
Number
null トラック ステップのサイズ。
$track-hover-color
Color
null ホバー時のトラックの色。
$thumb-color
Color
null つまみの色。
$thumb-focus-color
Color
null つまみのフォーカスの色。
$thumb-border-color
Color
null つまみの境界線の色。
$thumb-border-hover-color
Color
null ホバー時のつまみの境界線の色。
$thumb-border-focus-color
Color
null フォーカス時のつまみの境界線の色。
$thumb-disabled-border-color
Color
null つまみは無効に設定された場合の境界線の色。
$disabled-thumb-color
Color
null つまみは無効に設定された場合の色。
$label-background-color
Color
null バブル ラベルの背景色。
$label-text-color
Color
null バブル ラベルのテキストの色。
$base-track-color
Color
null トラックのベース背景色。
$base-track-hover-color
Color
null ホバー時のトラックのベース背景色。
$disabled-base-track-color
Color
null トラックは無効に設定された場合のベース背景色。
$disabled-fill-track-color
Color
null 無効時の塗りつぶしのトラックのベース背景色。
$tick-label-color
Color
null 目盛りのラベル色。
$tick-color
Color
null 目盛りの背景色。
必要条件
#

function snackbar-theme public コードを表示 open_in_new

背景色を設定して、テキストまたはボタンに色を設定しない場合、 ボタンとテキストの色はコントラスト色に設定します。

例

カスタム背景色を設定します。

$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
Color
null スナックバーに使用するテキストの色。
$button-color
Color
null スナックバーに使用するボタンの色。
$shadow
box-shadow
null スナックバーに使用する影を設定します。
$border-radius
List
null スナックバーに使用する境界線の半径。
必要条件
#

function splitter-theme public コードを表示 open_in_new

例

カスタム エキスパンダーの色を設定します。

$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-color
Color
null バーのドラッグ ハンドルの色。
$expander-color
Color
null 矢印エクスパンダーの色。
$border-radius
List
null スプリッター バーのドラッグ ハンドルの境界線の半径。
$focus-color
Color
null フォーカスされたスプリッター バーに使用される色。
$size
Number
null スプリッターのサイズ。垂直方向のスプリッターの場合、幅を返します。水平方向のスプリッターの場合、高さを返します。
必要条件
#

function stepper-theme public コードを表示 open_in_new

例

カスタム ステッパーの色を設定します。

$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-hover-background
Color
null ホバー時のステップ ヘッダーの背景。
$step-focus-background
Color
null フォーカスされているステップ ヘッダーの背景。
$title-color
Color
null ステップのタイトルの色。
$title-hover-color
Color
null ホバー時のステップ タイトルの色。
$title-focus-color
Color
null フォーカスされているステップ タイトルの色。
$subtitle-color
Color
null ステップ サブタイトルの色。
$subtitle-hover-color
Color
null ホバー時のステップ サブタイトルの色。
$subtitle-focus-color
Color
null フォーカスされているステップ サブタイトルの色。
$indicator-color
Color
null ステップ インジケーターのテキストの色。
$indicator-background
Color
null ステップ インジケーターの背景色。
$indicator-outline
Color
null ステップ インジケーターのアウトラインの色。
$invalid-step-background
Color
null 無効なステップ ヘッダーの背景。
$invalid-step-hover-background
Color
null ホバー時の無効なステップ ヘッダーの背景。
$invalid-step-focus-background
Color
null フォーカスされている無効なステップ ヘッダーの背景。
$invalid-title-color
Color
null 無効なステップ タイトルの色。
$invalid-title-hover-color
Color
null ホバー時の無効なステップ タイトルの色。
$invalid-title-focus-color
Color
null フォーカスされている無効なステップ タイトルの色。
$invalid-subtitle-color
Color
null 無効なステップ サブタイトルの色。
$invalid-subtitle-hover-color
Color
null ホバー時の無効なステップ サブタイトルの色。
$invalid-subtitle-focus-color
Color
null フォーカスされている無効なステップ サブタイトルの色。
$invalid-indicator-color
Color
null 無効なステップ インジケーターの色。
$invalid-indicator-background
Color
null 無効なステップ インジケーターの背景色。
$invalid-indicator-outline
Color
null 無効なステップ インジケーターのアウトラインの色。
$current-step-background
Color
null 現在のステップ ヘッダーの背景。
$current-step-hover-background
Color
null ホバー時の現在のステップ ヘッダーの背景。
$current-step-focus-background
Color
null フォーカスされている現在のステップ ヘッダーの背景。
$current-title-color
Color
null 現在のステップ タイトルの色。
$current-title-hover-color
Color
null ホバー時の現在のステップ タイトルの色。
$current-title-focus-color
Color
null フォーカスされている現在のステップ タイトルの色。
$current-subtitle-color
Color
null 現在のステップ サブタイトルの色。
$current-subtitle-hover-color
Color
null ホバー時の現在のステップ サブタイトルの色。
$current-subtitle-focus-color
Color
null 現在フォーカスされているステップ サブタイトルの色。
$current-indicator-color
Color
null 現在のステップ インジケーターの色。
$current-indicator-background
Color
null 現在のステップ インジケーターの背景色。
$current-indicator-outline
Color
null 現在のステップ インジケーターのアウトラインの色。
$complete-step-background
Color
null 完全なステップ ヘッダーの背景。
$complete-step-hover-background
Color
null ホバー時の完全なステップ ヘッダーの背景。
$complete-step-focus-background
Color
null フォーカスされている完全なステップ ヘッダーの背景。
$complete-title-color
Color
null 完全なステップ タイトルの色。
$complete-title-hover-color
Color
null ホバー時の完全なステップ タイトルの色。
$complete-title-focus-color
Color
null フォーカスされている完全なステップ タイトルの色。
$complete-subtitle-color
Color
null 完全なステップ サブタイトルの色。
$complete-subtitle-hover-color
Color
null ホバー時の完全なステップ サブタイトルの色。
$complete-subtitle-focus-color
Color
null フォーカスされているステップ サブタイトルの色。
$complete-indicator-color
Color
null 完了したステップ インジケーターの色。
$complete-indicator-background
Color
null 完了したステップ インジケーターの背景色。
$complete-indicator-outline
Color
null 完了したステップ インジケーターのアウトラインの色。
$disabled-title-color
Color
null 無効なステップ タイトルの色。
$disabled-subtitle-color
Color
null 無効なステップ サブタイトルの色。
$disabled-indicator-color
Color
null 無効なステップのインジケーター色。
$disabled-indicator-background
Color
null 無効なステップのインジケーター背景。
$disabled-indicator-outline
Color
null 無効なステップのインジケーター アウトラインの色。
$step-separator-color
Color
null ステップ間のセパレーターの境界線の色。
$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 ステップ ヘッダーの境界線の半径。
必要条件
#

function switch-theme public コードを表示 open_in_new

例

色にカスタム トラックとつまみを設定します。

$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
Color
null スイッチがオンの場合のトラックの色。
$track-on-hover-color
Color
null スイッチがオンおよびホバーした場合のトラックの色。
$thumb-off-color
Color
null スイッチがオフの場合のつまみの色。
$thumb-off-hover-color
Color
null スイッチがオフでホバーされている場合のつまみの色。
$track-off-color
Color
null スイッチがオフの場合のトラックの色。
$thumb-disabled-color
Color
null スイッチが無効にされた場合のつまみの色。
$thumb-on-disabled-color
Color
null スイッチがオンおよび無効の場合のつまみの色。
$track-disabled-color
Color
null スイッチが無効にされた場合のトラックの色。
$track-on-disabled-color
Color
null スイッチがオンおよび無効の場合のトラックの色。
$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 スイッチの境界線の色。
$border-hover-color
Color
null ホバー時のスイッチの境界線の色。
$border-disabled-color
Color
null スイッチが無効にされた場合の境界線の色。
$border-on-color
Color
null スイッチがオンの場合の境界線の色。
$border-on-hover-color
Color
null スイッチがオンでホバーされているときの境界線の色。
$focus-outline-color
Color
null フォーカスのアウトラインの色。
$focus-outline-color-focused
Color
null フォーカスされた状態のフォーカス アウトラインの色。
$focus-fill-color
Color
null フォーカス塗りつぶし色。
$focus-fill-hover-color
Color
null ホバー時のフォーカス塗りつぶし色。
必要条件
#

function tabs-theme public コードを表示 open_in_new

例

カスタム背景色を設定します。

$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
Color
null タブ ヘッダーに使用する背景色。
$item-hover-background
Color
null ホバーされるタブに使用する背景。
$item-hover-color
Color
null ホバーされるタブに使用するテキストの色。
$item-icon-color
Color
null タブ アイコンに使用する色。
$item-active-icon-color
Color
null アクティブなタブ アイコンに使用する色。
$item-active-hover-icon-color
Color
null The color used for the active tab icon on hover and focus.
$item-hover-icon-color
Color
null ホバー時のタブ アイコンに使用する色。
$item-disabled-icon-color
Color
null 無効なタブ アイコンに使用する色。
$item-active-color
Color
null アクティブ タブ テキストに使用する色。
$item-active-hover-color
Color
null アクティブタブのテキストに使用される色 (ホバーおよびフォーカス時)。
$item-active-background
Color
null アクティブなタブ背景に使用する色。
$item-active-hover-background
Color
null アクティブタブの背景に使用される色 (ホバーおよびフォーカス時)。
$item-disabled-color
Color
null 無効なタブ テキストに使用する色。
$indicator-color
Color
null アクティブ タブ インジケーターに使用する色。
$button-color
Color
null ボタン アイコン/テキストの色に使用する色。
$button-hover-color
Color
null ボタン アイコン/テキストはホバーされるときの色に使用する色。
$button-disabled-color
Color
null 無効なボタン アイコン/テキストに使用する色。
$button-background
Color
null ボタンの背景に使用する色。
$button-hover-background
Color
null ホバー時のボタン背景に使用される色。
$border-radius
List
null タブの境界線の半径。
$border-color
Color
null タブの境界線の色。
$border-color--hover
Color
null ホバー時のタブの境界線の色。
$tab-ripple-color
Color
null ボタンの背景に使用する色。
$button-ripple-color
Color
null ホバー時のボタン背景に使用される色。
必要条件
#

function time-picker-theme public コードを表示 open_in_new

背景色のみを指定した場合、テキスト/アイコンの色は 自動的にコントラスト色に割り当てられます。 無効にされた状態の色には適用しません。

例

タイム ピッカーの背景とテキストの色を変更します。

$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 オープン タイム ピッカーのテキストの色。
$hover-text-color
Color
null オープン タイム ピッカーのホバー テキストの色。
$selected-text-color
Color
null タイム ピッカーの選択された項目のテキストの色。
$active-item-background
Color
null タイム ピッカー内のフォーカスされた列の現在の項目の背景色。
$active-item-foreground
Color
null タイム ピッカー内のフォーカスされた列の現在の項目の前景色。
$disabled-text-color
Color
null 無効な値のテキストの色。
$disabled-item-background
Color
null 無効な値の背景色。
$header-background
Color
null タイム ピッカーのヘッダーの背景色。
$header-hour-text-color
Color
null タイム ピッカー時間テキストの色。
$background-color
Color
null タイム ピッカー パネルの背景色。
$time-item-size
Number
null タイム項目の高さ。
$divider-color
Color
null アクション領域の区切り線の色。
$border-color
Color
null タイム ピッカーの周囲の境界線の色。
$modal-shadow
box-shadow
null モーダル モードのタイムピッカーに使用されるカスタム影。
$dropdown-shadow
box-shadow
null ドロップダウン モードのタイムピッカーに使用されるカスタム影。
$border-radius
List
null ピッカーのアウトラインに使用される境界線の半径。
$active-item-border-radius
List
null 現在アクティブな項目のアウトラインに使用される境界線の半径（時、分、午後 / 午前）。
必要条件
#

function toast-theme public コードを表示 open_in_new

例

カスタム背景色を設定します。

$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
Color
null トーストに使用されるテキストの色。
$border-color
Color
null トーストに使用される境界線の色。
$border-radius
List
null トースト コンポーネントに使用される境界線の半径。
$shadow
box-shadow
null トーストに使用する影を設定します。
必要条件
#

function tooltip-theme public コードを表示 open_in_new

ツールチップに関連するすべてのスタイル プロパティを含むマップを返します。

例

ツールチップの背景を変更します。

$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
Color
null ツールチップのテキストの色。
$border-radius
List
null ツールチップ コンポーネントに使用される境界線の半径。
$shadow
box-shadow
null Tooltip コンポーネントに使用する影を設定します。
必要条件
#

function tree-theme public コードを表示 open_in_new

ツリー コンポーネントのテーマに関連するすべてのスタイル プロパティを含むマップを返します。

例

ツリーの背景を変更する

$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 ツリー ノード コンテンツに使用される色。
$icon-color
Color
null ツリー ノード アイコンに使用される色。
$background-selected
Color
null 選択されたツリー ノードに使用される背景色。
$foreground-selected
Color
null 選択したツリー ノードのコンテンツに使用される色。
$background-active
Color
null アクティブ ツリー ノードに使用される背景色。
$foreground-active
Color
null アクティブ ツリー ノードのコンテンツに使用される色。
$background-active-selected
Color
null アクティブな選択されたツリー ノードに使用される背景色。
$foreground-active-selected
Color
null アクティブな選択されたツリー ノードのコンテンツに使用される色。
$background-disabled
Color
null 無効な状態のツリー ノードに使用される背景色。
$foreground-disabled
Color
null 無効なツリー ノードのコンテンツに使用される色。
$drop-area-color
Color
null ツリー ノード ドロップ aria に使用される背景色。
$border-color
Color
null フォーカス状態のツリー ノードに使用されるアウトラインの影の色。
$hover-color
Color
null ホバー時にツリー ノードに使用される背景色。
$hover-selected-color
Color
null ホバー時に選択されたツリー ノードに使用される背景色。
必要条件
#

mixin core public コードを表示 open_in_new

パラメーター
名前 型 デフォルト 説明
$print-layout
boolean
true コンポーネントの印刷スタイルをアクティブにします。
$enhanced-accesibility
boolean
false コンポーネントの色およびその他のプロパティをアクセスしやすい値に切り替えます。
#

mixin css-vars public コードを表示 open_in_new

テーマの色を CSS 変数として特定のスコープに追加します。

例

グリッド テーマの色を 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 変数のスコープ。(オプション)
必要条件
#

mixin sizable public コードを表示 open_in_new

スコープがサイズの変更に対応できるように、必要な CSS プロパティを追加します。

例

例

.my-component {
  @include sizable();
}
#

mixin theme public コードを表示 open_in_new

Ignite UI for Angular のグローバル テーマを生成します。

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$schema
Map
$light-material-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$exclude
List
( ) グローバル テーマのスタイルから除外される igx コンポーネントのリスト。
$roundness
Number
null すべてのコンポーネントのグローバルな丸み係数 (値は 0〜1 の任意の小数にすることができます) を設定します。
$elevation
Boolean
true テーマのすべてのコンポーネントのエレベーションのオン/オフを切り替えます。
$elevations
Map
$elevations すべてのコンポーネント テーマで使用されるエレベーション マップ。
必要条件
#

mixin light-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ライト背景で使用できるグローバルなマテリアル テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin dark-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ダーク背景で使用できるグローバルなマテリアル テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される igx コンポーネントのリスト。
参照
#

mixin bootstrap-light-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ライト背景で使用されるグローバル bootstrap のようなテーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin bootstrap-dark-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ダーク背景で使用されるグローバル bootstrap のようなテーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin fluent-light-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ライト背景で使用されるグローバル fluent テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin fluent-dark-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ダーク背景で使用されるグローバル fluent テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin indigo-light-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ライト背景で使用できるグローバルなインディゴ テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照
#

mixin indigo-dark-theme public コードを表示 open_in_new

テーマ ミックスインのラッパー。ダーク背景で使用できるグローバル インディゴ テーマを作成します。

warning 非推奨

- Use the theme mixin instead.

パラメーター
名前 型 デフォルト 説明
$palette *
Map
- グローバル テーマで使用されるパレット。
$exclude
List
( ) グローバル テーマのスタイルから除外される ig コンポーネントのリスト。
参照

ドキュメントを検索