themes

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 pivot-data-selector-theme public コードを表示 open_in_new

パラメーター

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

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 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 extend

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 extend

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 extend

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 extend

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 extend

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 extend

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 extend

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 extend

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 extend

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	アバターのサイズ。

必要条件

variables light-material-schema

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	バッジコンポーネントに使用される境界線の半径の割合。

必要条件

variables light-material-schema

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

例

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

$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	バナーの境界線の半径。

必要条件

variables light-material-schema

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	バーに使用する影を設定します。

必要条件

variables light-material-schema

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	ボタングループコンポーネントに使用される境界線の半径。

必要条件

variables light-material-schema

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	ボタンの無効な境界線の色。

必要条件

variables light-material-schema

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	ボタンの無効な境界線の色。

必要条件

variables light-material-schema

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	ボタンの無効な境界線の色。

必要条件

variables light-material-schema

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	ボタンの無効な境界線の色。

必要条件

variables light-material-schema

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	ボタンの無効な境界線の色。

必要条件

variables light-material-schema

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	コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$content-foreground	Color	null	日、月、年ビューの前景。
$content-background	Color	null	日、月、年ビューの背景。
$border-size	Color	null	すべてのカレンダービューの境界線のサイズ。
$header-foreground	Color	null	ヘッダーの前景。
$header-background	Color	null	ヘッダーの背景。
$picker-foreground	Color	null	月と年ピッカーの前景。
$picker-background	Color	null	月と年ピッカーの背景。
$picker-hover-foreground	Color	null	月と年ピッカーの :hover 色。
$weekday-color	Color	null	曜日ラベルの色。
$inactive-color	Color	null	前月と次月の日付の色 ([hideOutsideDays] が false (デフォルト) に設定されている場合にのみ表示されます)。
$weekend-color	Color	null	週末の色。
$week-number-foreground	Color	null	週番号列の前景。
$week-number-background	Color	null	週番号列の背景。
$ym-selected-current-hover-foreground	Color	null	現在選択されている月/年の :hover 前景色。
$ym-selected-current-hover-background	Color	null	現在選択されている月/年の :hover 背景色。
$navigation-color	Color	null	月間ナビゲーションを行うアイコンボタンの色。
$navigation-hover-color	Color	null	月間ナビゲーションを行うアイコンボタンの :hover 色。
$navigation-focus-color	Color	null	月間ナビゲーションを行うアイコンボタンの :focus 色。
$ym-hover-foreground	Color	null	月/年の :hover 前景。
$ym-hover-background	Color	null	月/年の :hover 背景。
$ym-current-foreground	Color	null	現在の月/年の前景。
$ym-current-background	Color	null	現在の月/年の背景。
$ym-current-hover-foreground	Color	null	現在の月/年の :hover 前景。
$ym-current-hover-background	Color	null	現在の月/年の :hover 背景。
$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-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 背景色。
$ym-current-outline-color	Color	null	現在の月/年のアウトラインの色。
$ym-current-outline-hover-color	Color	null	現在の月/年の :hover アウトラインの色。
$ym-current-outline-focus-color	Color	null	現在の月/年の :focus アウトラインの色。
$ym-selected-outline-color	Color	null	選択した月/年のアウトラインの色。
$ym-selected-hover-outline-color	Color	null	選択した月/年の :hover アウトラインの色。
$ym-selected-focus-outline-color	Color	null	選択した月/年の :focus アウトラインの色。
$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 アウトラインの色。
$date-hover-foreground	Color	null	日付のアイドル状態の :hover 前景。
$date-hover-background	Color	null	日付のアイドル状態の :hover 背景。
$date-focus-foreground	Color	null	日付のアイドル状態の :focus 前景。
$date-focus-background	Color	null	日付のアイドル状態の :focus 背景。
$date-selected-foreground	Color	null	選択された日付のテキストの色。
$date-selected-background	Color	null	選択された日付の背景色。
$date-selected-hover-background	Color	null	選択した日付のホバー背景色。
$date-selected-focus-background	Color	null	選択した日付のフォーカスの背景色。
$date-selected-hover-foreground	Color	null	選択した日付のホバーテキストの色。
$date-selected-focus-foreground	Color	null	選択した日付のフォーカステキストの色。
$date-selected-current-background	Color	null	選択した / 現在の日付の背景色。
$date-selected-current-hover-background	Color	null	選択した / 現在の日付のホバー背景色。
$date-selected-current-focus-background	Color	null	選択した / 現在の日付のフォーカスの背景色。
$date-selected-current-foreground	Color	null	選択した / 現在の日付のテキストの色。
$date-selected-current-hover-foreground	Color	null	選択した日付 / 現在の日付のホバーテキストの色。
$date-selected-current-focus-foreground	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-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-current-foreground	Color	null	現在の日付の前景。
$date-current-background	Color	null	現在の日付の背景色。
$date-current-hover-foreground	Color	null	現在の日付の :hover テキストの色。
$date-current-hover-background	Color	null	現在の日付の :hover 背景色。
$date-current-focus-foreground	Color	null	現在の日付の :focus テキストの色。
$date-current-focus-background	Color	null	現在の日付の :focus 背景色。
$date-special-background	Color	null	特別としてマークされた日付の背景。
$date-special-foreground	Color	null	特別としてマークされた日付の前景。
$date-special-hover-background	Color	null	特別としてマークされた日付の背景。
$date-special-hover-foreground	Color	null	特別としてマークされた日付の前景。
$date-special-focus-background	Color	null	特別としてマークされた日付の背景。
$date-special-focus-foreground	Color	null	特別としてマークされた日付の前景。
$date-special-border-color	Color	null	特別としてマークされた日付のアウトライン。
$date-special-range-background	Color	null	範囲内にあり、特別としてマークされている日付の背景。
$date-special-range-hover-background	Color	null	範囲内にあり、特別としてマークされている日付の :hover 背景。
$date-special-range-focus-background	Color	null	範囲内にあり、特別としてマークされている日付の :focus 背景。
$date-special-range-foreground	Color	null	範囲内にあり、特別としてマークされている日付の前景。
$date-special-range-border-color	Color	null	範囲内にあり、特別としてマークされている日付のアウトライン。
$border-color	Color	null	カレンダーの境界線の色。
$date-border-color	Color	null	日付の境界線の色。
$date-hover-border-color	Color	null	日付の :hover 境界線の色。
$date-focus-border-color	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-current-border-color	Color	null	現在の日付の境界線の色。
$date-current-hover-border-color	Color	null	現在の日付の :hover 境界線の色。
$date-current-focus-border-color	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-range-border-color	Color	null	範囲選択の境界線の色。
$date-range-preview-border-color	Color	null	プレビュー状態の範囲選択の境界線の色 (範囲の終了を選択する前に表示されます)。
$date-disabled-foreground	Color	color: ('gray', 500, .5)	無効な日付の前景色。
$date-disabled-range-foreground	Color	color: ('gray', 500)	無効な日付の前景色。
$size	Number	null	日、月、年ビューのサイズ。
$border-radius	List	null	カレンダーに使用される境界線の半径。
$date-border-radius	List	null	日付に使用される境界線の半径。
$date-range-border-radius	List	null	日付範囲の選択に使用される境界線の半径。
$date-current-border-radius	List	null	現在の日付に使用される境界線の半径。
$date-special-border-radius	List	null	特別な日付に使用される境界線の半径。
$ym-border-radius	List	null	月/年に使用される境界の半径。
$actions-divider-color	Color	null	日付ピッカーのアクション区切り線に使用される境界線の色。

必要条件

variables light-material-schema

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 までの境界線の半径の割合。

必要条件

variables light-material-schema

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

例

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

$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 までの境界線の半径。

必要条件

variables 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	ホバー時にチェックされたマークの色。
$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 に設定します。

必要条件

variables light-material-schema

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	チップのフォーカス削除アイコンの色。

必要条件

variables light-material-schema

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	パネルの背景色。

必要条件

variables light-material-schema

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	コンボがフォーカスされている時のコンボクリアボタンの前景色。

必要条件

variables light-material-schema

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	ダイアログコンポーネントに使用される境界線の色。

必要条件

variables light-material-schema

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

必要条件

variables light-material-schema

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

必要条件

variables light-material-schema

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	ドロップダウン項目に使用される境界の半径。

必要条件

variables light-material-schema

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 までの境界線の半径。

必要条件

variables light-material-schema

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	集計のホバーラベルの色。

必要条件

variables light-material-schema

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-background-and	Color	null	高度なフィルタリングの "AND" 条件の背景色。
$filtering-background-and--focus	Color	null	高度なフィルタリングの "AND" 条件のフォーカス/選択の背景色。
$filtering-background-or	Color	null	高度なフィルタリングの "OR" 条件の背景色。
$filtering-background-or--focus	Color	null	高度なフィルタリングの "OR" 条件のフォーカス/選択の背景色。
$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	列ドロップ領域に使用される境界線の半径。

必要条件

variables light-material-schema

例

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

$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	ツールバーの下の境界線の色。

必要条件

variables 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	アクティブ状態の強調表示に使用されるテキストの色。

必要条件

variables light-material-schema

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	無効のアイコン色。

必要条件

variables light-material-schema

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	ヘルパーのテキストの色。
$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	リストの境界線の色。

必要条件

variables light-material-schema

例

背景色を変更します。

$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	ナビゲーションバーの影の表示状態を設定します。

必要条件

variables light-material-schema

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	ナビゲーションドロワーに使用される境界線の半径。

必要条件

variables light-material-schema

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

必要条件

variables light-material-schema

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)	ページングパネルの境界線の色。

必要条件

variables light-material-schema

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	リニアプログレスバーのストリップの幅。

必要条件

variables light-material-schema

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	無効な状態のフォーカスアウトラインの色。

必要条件

variables light-material-schema

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

必要条件

variables light-material-schema

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	リップルの色。

必要条件

variables light-material-schema

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	角の境界線のサイズ。

必要条件

variables light-material-schema

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	マテリアル境界バリアントで選択がフォーカスされているときの選択トグルボタンの背景色。

必要条件

variables light-material-schema

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	目盛りの背景色。

必要条件

variables light-material-schema

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	スナックバーに使用する境界線の半径。

必要条件

variables light-material-schema

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	ステップヘッダーの境界線の半径。

必要条件

variables light-material-schema

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	ホバー時のフォーカス塗りつぶし色。

必要条件

variables light-material-schema

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-hover-icon-color	Color	null	ホバー時のタブアイコンに使用する色。
$item-disabled-icon-color	Color	null	無効なタブアイコンに使用する色。
$item-active-color	Color	null	アクティブタブテキストに使用する色。
$item-active-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	ホバー時のボタン背景に使用される色。

必要条件

variables light-material-schema

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	現在アクティブな項目のアウトラインに使用される境界線の半径（時、分、午後 / 午前）。

必要条件

variables light-material-schema

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	トーストに使用する影を設定します。

必要条件

variables light-material-schema

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

例

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

$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 コンポーネントに使用する影を設定します。

必要条件

variables light-material-schema

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	ホバー時に選択されたツリーノードに使用される背景色。

必要条件

variables light-material-schema

mixin action-strip public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

パラメーター

名前	型	デフォルト	説明
$theme *	Map	-	コンポーネントのスタイル設定に使用されるテーマ。

参照

code_blocks css-vars

mixin date-picker public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

パラメーター

名前	型	デフォルト	説明
$theme *	Map	-	コンポーネントのスタイル設定に使用されるカレンダーテーマ。

参照

code_blocks css-vars

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

warning 非推奨

Use the `css-vars` mixin instead.

パラメーター

名前	型	デフォルト	説明
$theme *	Map	-	コンポーネントのスタイル設定に使用されるテーマ。

参照

code_blocks css-vars

mixin file-input public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

パラメーター

名前	型	デフォルト	説明
$theme *	Map	-	コンポーネントのスタイル設定に使用されるテーマ。

参照

code_blocks css-vars

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 変数のスコープ。(オプション)

必要条件

code_blocks css-vars-from-theme

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 コンポーネントのリスト。

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme

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

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

warning 非推奨

- Use the theme mixin instead.

パラメーター

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

参照

code_blocks theme