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

utilities

#

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 トラックの danger (危険) の塗りつぶし色。
$fill-color-warning
Color
null トラックの warning (警告) の塗りつぶし色。
$fill-color-info
Color
null トラックのinfo (情報) の塗りつぶし色。
$fill-color-success
Color
null トラックの success (成功) の塗りつぶし色。
$text-color
Color
null 値テキストの色。
$diameter
Number
null プログレス円の直径。
#

function pad public コードを表示 open_in_new

間隔の値を考慮したコンポーネントのサイズに基づく値を返します。 渡されたサイズは、比較する前に絶対値に変換されます。

.my-component {
padding: pad(4px, 8px, 16px);
}
パラメーター
名前 デフォルト 説明
$sm *
Number
- コンポーネントのサイズが small の場合の優先値。
$md
Number
$sm コンポーネントのサイズが medium の場合の優先値。
$lg
Number
$md コンポーネントのサイズが large の場合の優先値。
$dir
Number
null 優先方向 - inline (インライン) または block (ブロック)。
#

function pad-inline public コードを表示 open_in_new

インライン間隔を追加するために使用されます。

.my-component {
padding: pad-inline(4px, 8px, 16px);
}
パラメーター
名前 デフォルト 説明
$sm *
Number
- コンポーネントのサイズが small の場合の優先値。
$md
Number
$sm コンポーネントのサイズが medium の場合の優先値。
$lg
Number
$md コンポーネントのサイズが large の場合の優先値。
#

function pad-block public コードを表示 open_in_new

ブロック間隔を追加するために使用されます。

.my-component {
padding: pad-block(4px, 8px, 16px);
}
パラメーター
名前 デフォルト 説明
$sm *
Number
- コンポーネントのサイズが small の場合の優先値。
$md
Number
$sm コンポーネントのサイズが medium の場合の優先値。
$lg
Number
$md コンポーネントのサイズが large の場合の優先値。
#

function clean public コードを表示 open_in_new

マップからすべての null キーと値のペアを削除します。

パラメーター
名前 デフォルト 説明
$map *
Map
- クリーンアップするターゲット マップ。
#

function extend public コードを表示 open_in_new

プロセスで null 値を無視して、別の Map の値で Map を拡張します。

パラメーター
名前 デフォルト 説明
$maps *
Map...
- 継承されるマップ。
必要条件
#

function diff public コードを表示 open_in_new

2 つ以上のマップ間の差異を抽出して最初のマップと残りのマップ比較します。

最初のマップと比較したときの、2 番目のマップの固有のプロパティを引き出します。

$map-1: (
color: orange,
background: black,
);
$map-2: (
color: red,
background: black,
);
$diffed: diff($map-1, $map-2); // returns (color: red);
パラメーター
名前 デフォルト 説明
$maps *
Map...
- 差分されるマップのリスト。
#

function to-fixed public コードを表示 open_in_new

数値を特定の精度に丸めます。

パラメーター
名前 デフォルト 説明
$number *
Number
- 丸められる数値。
$precision
Number
2 小数点以下の桁数を指定します。
#

function to-string public コードを表示 open_in_new

数値を文字列に変換します。

パラメーター
名前 デフォルト 説明
$num *
number
- 変換する数字。
$radix
radix
16 この変換に使用される base radix。
#

function is-root public コードを表示 open_in_new

呼ばれた範囲がドキュメントのルートの場合、true を返します。

現在の範囲がルートであるかどうかをチェックします。

@mixin smart-mixin() {
$scope: if(is-root(), ':root', '&');
#{$scope} {
/* style rules here */
}
}
#

function is-host public コードを表示 open_in_new

呼び出し元のスコープが :host の場合に true を返します。

現在の範囲が :root であるかどうかをチェックします。

@mixin smart-mixin() {
$host: is-host();
@if is-host() {
/* style rules here */
}
}
#

function split public コードを表示 open_in_new

指定されたセパレーターを使用して、文字列をリストに分割します。

パラメーター
名前 デフォルト 説明
$string *
String
- 分割する文字列。
$separator *
String
- 分割の文字列セパレーター。
#

function replace public コードを表示 open_in_new

文字列の 1 つ、一部、またはすべての一致を置換で置き換えた新しい文字列を返します。

パラメーター
名前 デフォルト 説明
$string *
String
- ターゲット文字列。
$search *
String
- 検索する用語。
$replace *
String
- 検索語を置き換える文字列。
#

mixin progress-circular public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin color-classes public コードを表示 open_in_new

指定したプロパティとカラー パレットのすべての色 の CSS クラス名を生成します。 オプションでプレフィックスとサフィックスをクラス名に添付します。

パレットの色でバックグラウンド クラスを生成します。

// 次のようなクラス名を生成します。
// .igx-primary-500-bg { ... };
@include color-classes(
$prop: 'background-color',
$suffix: 'bg'
);
パラメーター
名前 デフォルト 説明
$prop *
string
- パレット カラーに割り当てられる CSS プロパティ。
$prefix
string
igx クラス名に連結するプレフィックス。
$suffix
string
null クラス名に連結されるサフィックス。
$palette
Map
$default-palette CSS クラス名の生成に使用する igx パレット。
#

mixin line-clamp public コードを表示 open_in_new

特定の行数でテキストを切り捨てます。

4 行目以降のテキストを切り捨てます。

@include line-clamp(4, true, true);
パラメーター
名前 デフォルト 説明
$lines *
number|string
- 表示する行数。
$inline *
Boolean
- 要素が inline-box または box を表示するかどうかを設定します。
$vertical *
Boolean
- 要素がコンテンツを水平または垂直に配置するかどうかを設定します。
#

mixin ellipsis public コードを表示 open_in_new

E テキスト要素に text-overflow 省略記号を適用します。 この処理は display flex の要素には機能しません。

.my-class {
@include ellipsis();
}

ドキュメントを検索