typography

variable ITypeScale public コードを表示 open_in_new

13 種類のカテゴリタイプスタイルで構成されるリスト。

$ITypeScale: (h1, h2, h3, h4, h5, h6, subtitle-1, subtitle-2, body-1, body-2, button, caption, overline);

variable ITypeStyle public コードを表示 open_in_new

すべてのカテゴリのスタイルルールのセット。

$ITypeStyle: (
    font-family: inherit,
    font-size: null,
    font-weight: normal,
    font-style: normal,
    line-height: normal,
    letter-spacing: normal,
    text-transform: none,
    margin-top: 0,
    margin-bottom: 0,
);

variable IElementCategories public コードを表示 open_in_new

ネイティブ要素にマッピングできるすべてのカテゴリタイプスタイルのリスト。

$IElementCategories: (
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    body-1: 'p',
);

function em public コードを表示 open_in_new

ピクセルを相対値 (em) に変換します。

例

.my-component {
  margin: em(10px) em(5px);
}

// 出力
.my-component {
  margin: 0.625em 0.3125em;
}

パラメーター

名前	型	デフォルト	説明
$pixels *	number\|string	-	変換するピクセル値。
$context	number\|string	$browser-context	対して変換するベースコンテキスト。

function rem public コードを表示 open_in_new

ピクセルをルート相対値 (rem) に変換します。

例

.my-component {
  margin: rem(10px) rem(5px);
}

// 出力
.my-component {
  margin: 0.625rem 0.3125rem;
}

パラメーター

名前	型	デフォルト	説明
$pixels *	number\|string	-	変換するピクセル値。
$context	number\|string	$browser-context	対して変換するベースコンテキスト。

function px public コードを表示 open_in_new

相対値 (em/rem) をピクセルに変換します。

例

.my-component {
  margin: px(3rem);
}

// 出力
.my-component {
  margin: 48px;
}

パラメーター

名前	型	デフォルト	説明
$num *	number\|string	-	変換される相対値。
$context	number\|string	$browser-context	対して変換するベースコンテキスト。

function type-style public コードを表示 open_in_new

ITypeScale リストに準拠するタイプスタイルを含むタイプスケールマップを作成します。

例

$main_navigation: type-style(
   $font-size: rem(14px),
   $font-weight: 600,
   $letter-spacing: rem(.1px),
   $line-height: rem(14px),
   $text-transform: none,
);

// type-style() mixin を使用して、type-style() 関数から生成された新しいタイプ スタイルを使用します。
.main-nav {
  @include type-style($main_navigation);
}

パラメーター

名前	型	デフォルト	説明
$font-family	String	var(--ig-font-family)	タイプスタイルのフォントファミリ。
$font-size *	String	-	タイプスタイルのフォントのサイズ。
$font-weight	Number \| String	normal	タイプスタイルのフォントのウェイト。
$font-style	String	normal	タイプスタイルのフォントスタイル。
$line-height	Number \| String	normal	タイプスタイルの線の高さ。
$letter-spacing	Number \| String	normal	タイプスタイルの文字の間隔。
$text-transform	String	none	タイプスタイルの text-transform プロパティ。
$margin-top	Number	0	タイプスタイルの margin-top プロパティ。
$margin-bottom	Number	0	タイプスタイルの margin-bottom プロパティ。

必要条件

variables ITypeStyle

function type-scale public コードを表示 open_in_new

ITypeScale リストに準拠するタイプスタイルを含むタイプスケールマップを作成します。

例

// 最初に使用するタイプ スタイルを定義します
$my-body-1: type-style(
   $font-size: rem(14px),
);

// タイプ スタイル マップを使用して、既存のマップの 1 つをオーバーライドします。
$type-scale: type-scale(
  ...
  $body-1: $my-body-1,
  ...
);

パラメーター

名前	型	デフォルト	説明
$h1 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$h2 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$h3 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$h4 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$h5 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$h6 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$subtitle-1 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$subtitle-2 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$body-1 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$body-2 *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$button *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$caption *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$overline *	Map	-	type-style 関数に生成されたタイプスタイルプロパティを含むマップ。
$_theme	String	null	このタイプスケールに関連するテーマ。内部使用のみ。

必要条件

variables ITypeScale

function type-scale-category public コードを表示 open_in_new

タイプスケールカテゴリ config を取得します。

例

`h1` scale のための scale カテゴリ config の型を取得します。

$h1-type-scale: type-scale-category($type-scale, 'h1');

パラメーター

名前	型	デフォルト	説明
$scale *	Map	-	type-scale が生成されるようにタイプスケールのマップ参照。
$category *	String	-	設定する必要のあるスケールカテゴリ。'h1' など。

mixin category-chart-typography public コードを表示 open_in_new

category-chart コンポーネントにタイポグラフィのスタイルを追加します。タイポグラフィスケールから 'h6'、'subtitle-1' および 'body-2' カテゴリを使用します。

パラメーター

名前	型	デフォルト	説明
$type-scale *	Map	-	type-scale が生成されるタイポグラフィスケール。
$categories	Map	( 'title': 'h6', 'subtitle': 'subtitle-1, 'x-axis-label-text-style': 'body-2', 'y-axis-label-text-style': 'body-2', 'x-axis-title-text-style': 'body-2', 'y-axis-title-text-style': 'body-2', )	タイプスタイルのために使用されるタイポグラフィスケールからのカテゴリです。

必要条件

code_blocks type-style

mixin data-chart-typography public コードを表示 open_in_new

data-chart コンポーネントにタイポグラフィのスタイルを追加します。タイポグラフィスケールから 'h6' および 'subtitle-1' カテゴリを使用します。

パラメーター

名前	型	デフォルト	説明
$type-scale *	Map	-	type-scale が生成されるタイポグラフィスケール。
$categories	Map	(title: 'h6', subtitle: 'subtitle-1')	タイプスタイルのために使用されるタイポグラフィスケールからのカテゴリです。

必要条件

code_blocks type-style

mixin pie-chart-typography public コードを表示 open_in_new

pie-chart コンポーネントにタイポグラフィのスタイルを追加します。タイポグラフィスケールから 'body-2' カテゴリを使用します。

パラメーター

名前	型	デフォルト	説明
$type-scale *	Map	-	type-scale が生成されるタイポグラフィスケール。
$categories	Map	(text: 'body-2')	タイプスタイルのために使用されるタイポグラフィスケールからのカテゴリです。

必要条件

code_blocks type-style

mixin shape-chart-typography public コードを表示 open_in_new

shape-chart コンポーネントにタイポグラフィのスタイルを追加します。タイポグラフィスケールから 'h3'、'h4'、'h6' および 'subtitle-1' カテゴリを使用します。

パラメーター

名前	型	デフォルト	説明
$type-scale *	Map	-	igx-type-scale が生成されるタイポグラフィスケール。
$categories	Map	( 'title': 'h6', 'subtitle': 'subtitle-1, 'x-axis-label-text-style': 'h4', 'y-axis-label-text-style': 'h4', 'x-axis-title-text-style': 'h3', 'y-axis-title-text-style': 'h3', )	タイプスタイルのために使用されるタイポグラフィスケールからのカテゴリです。

必要条件

code_blocks type-style

mixin type-style public コードを表示 open_in_new

カテゴリに関連するすべてのスタイルを現在のスタイルブロックに含めます。

例

カスタム CSS セレクターに `h1` スタイルを追加します。

.fancy-h1 {
   @include type-style('h1');

   color: mediumvioletred;
}

パラメーター

名前	型	デフォルト	説明
$category *	String	-	タイプスケールのカテゴリ。
$check	String	true	ITypeScale に対するカテゴリチェックを切り替えます。カスタムタイプスケールを使用する場合は false に設定します。

mixin type-style-vars public コードを表示 open_in_new

タイプスタイルマップを CSS フォント変数に変換します。

例

CSS フォントの省略構文を使用して、`h1` スタイルをカスタム CSS プロパティに割り当てます。

$h1-style: type-scale-category($type-scale, 'h1');
@include type-style-vars('h1', $h1-style);

パラメーター

名前	型	デフォルト	説明
$name *	String	-	カスタム CSS 変数名。
$type-style *	Map	-	type-style によって生成される style 型のマップ参照。

mixin type-style-elements public コードを表示 open_in_new

IElementCategories マップに一致するすべてのネイティブ要素をスタイルします。

例

すべてのネイティブ要素にタイプスタイルを適用します。

.ig-typography {
  @include type-style-elements();
}

必要条件

mixin type-style-classes public コードを表示 open_in_new

ITypeScale マップ内のすべてのカテゴリのスタイルルールを持つ CSS クラスを作成します。

例

すべてのタイプスタイルの CSS クラスを作成します。

.ig-typography {
  @include type-style-classes();
}

必要条件

mixin font-var public コードを表示 open_in_new

タイプスタイルのマップを CSS 変数に割り当てられたフォントスタイルルールに変換します。

例

CSS フォントの省略構文を使用して、`h1` スタイルをカスタム CSS プロパティに割り当てます。

$h1-style: type-scale-category($type-scale, 'h1');
@include font-var('h1-font', $h1-style);

パラメーター

名前	型	デフォルト	説明
$name *	String	-	カスタム CSS 変数名。
$type-style *	Map	-	type-style によって生成されるタイプスタイルのマップ参照。
$prefix	String	null	任意のプレフィックス。

mixin typography public コードを表示 open_in_new

h1-h6 のためにタイポグラフィスタイルを追加して、カスタムタイポグラフィクラスセレクターを作成します。生成されたスタイルは、渡された書体とタイプスケールに基づきます。

例

@include typography('Roboto', $my-type-scale);

パラメーター

名前	型	デフォルト	説明
$font-family *	String	-	すべてのタイポグラフィ要素中に使用されるフォントファミリ。
$type-scale *	Map	-	type-scale 関数で生成されるタイプスケールのマップ。

必要条件

mixin charts-typography public コードを表示 open_in_new

特定のタイプスケールとターゲットのすべてのチャート関連のタイポグラフィスタイルが含まれます。

パラメーター

名前	型	デフォルト	説明
$type-scale *	Map	-	タイポグラフィスタイルを含めるときに使用するタイプスケール。
$target	String	'angular'	ターゲットプラットフォーム。'angular'、'webc'、または 'blazor' のいずれかです。

Ignite UI for Angular

typography

パラメーター

パラメーター

パラメーター

パラメーター

必要条件

パラメーター

必要条件

パラメーター

パラメーター

必要条件

パラメーター

必要条件

パラメーター

必要条件

パラメーター

必要条件

パラメーター

パラメーター

必要条件

必要条件

パラメーター

パラメーター

必要条件

パラメーター