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 action-strip public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin avatar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin banner public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin bottom-nav public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin button-group public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin button public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

パラメーター
名前 型 デフォルト 説明
$flat
Map
null コンポーネントのスタイル設定に使用される flat テーマ。
$contained
Map
null コンポーネントのスタイル設定に使用される contained テーマ。
$outlined
Map
null コンポーネントのスタイル設定に使用される outlined テーマ。
$fab
Map
null コンポーネントのスタイル設定に使用される fab テーマ。
参照
#

mixin calendar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin checkbox public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin column-actions public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin dialog public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin divider public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin dock-manager public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin drop-down public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin expansion-panel public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin grid-summary public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin grid-toolbar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin excel-filtering public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin highlight public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin icon-button public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin navbar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin navdrawer public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin overlay public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin paginator public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin query-builder public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin rating public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin ripple public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin scrollbar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin select public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin slider public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin snackbar public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin splitter public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin stepper public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin switch public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

warning 非推奨

Use the `css-vars` mixin instead.

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

mixin tooltip public コードを表示 open_in_new

warning 非推奨

Use the `css-vars` mixin instead.

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

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

ドキュメントを検索