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

utilities

#

function dynamic-shade public コードを表示 open_in_new

LCH 色空間で明度を調整することにより、色の動的なシェードを計算します。

パラメーター
名前 型 デフォルト 説明
$color *
Color
- シェード化する基準色。
$lightness
Number
50 移動先の目標明度値。
$percentage
Number
0.1 目標明度に向かって移動する割合。
$offset
Number
10 方向に基づいて加算または減算されるオフセット。
#

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 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();
}

ドキュメントを検索