タイポグラフィ

Ignite UI for Angular Typography Sass モジュールは、アプリケーション全体、特定ののタイポグラフィのスケールやコンポーネントを変更できます。

Ignite UI for Angular は、マテリアルデザインの仕様で説明されるようにタイプシステムに準拠します。タイプシステムは、タイプスケールでほとんどのコンポーネントで使用されている 13 の異なるカテゴリタイプスタイルで構成されます。エンドユーザーはすべてのスケールカテゴリの完全な再利用、調整ができます。

以下は、Ignite UI for Angular で定義される 13 カテゴリスタイルすべてのリストです。

スケールカテゴリ	フォントファミリ	フォントウェイト	フォントサイズ	テキスト変換	文字スペース	行の高さ
h1	Titillium Web	300	6 rem	none	-.09375 rem	7 rem
h2	Titillium Web	300	3.75 rem	none	-.0312 rem	4.4375 rem
h3	Titillium Web	400	3 rem	none	0	3.5625 rem
h4	Titillium Web	400	2.125 rem	none	.015625 rem	2.5 rem
h5	Titillium Web	400	1.5 rem	none	0	1.75 rem
h6	Titillium Web	600	1.25 rem	none	.009375 rem	1.5 rem
subtitle-1	Titillium Web	400	1 rem	none	.009375 rem	1.5 rem
subtitle-2	Titillium Web	600	.875 rem	none	.00625 rem	1.5 rem
body-1	Titillium Web	400	1 rem	none	.03125 rem	1.75 rem
body-2	Titillium Web	400	.875 rem	none	.015625 rem	1.25 rem
button	Titillium Web	600	.875 rem	uppercase	.046875	1 rem
caption	Titillium Web	400	.75 rem	none	.025 rem	1 rem
overline	Titillium Web	400	.625 rem	uppercase	.09375 rem	1 rem

アプリケーションで複数の scales を定義でき、スケールカテゴリを共有できます。scale category は、type styles のセットで font-family、font-size、font-weight、line-height、letter-spacing、text-transform に関する情報を含みます。

Ignite UI for Angular は、初期のタイポグラフィのスタイルを設定するために igx-typography mixin で順番に使用される$default-type-scale (上記の表を参照) を定義します。ただしユーザーは、igx-typography mixin で使用するために異なるタイプスケールを渡すことができます。

使用方法

Important

デフォルトではタイポグラフィスタイルを適用しません。アプリケーションでインフラジスティックスのタイポグラフィを使用するには、igx-typography CSS をトップレベルの要素に設定する必要があります。そのすべての子がタイポグラフィスタイルを使用するようになります。

Ignite UI for Angular のデフォルトフォントは Titillium Web です。使用にはフォントをホストするか Google フォントからのフォントを含む必要があります。

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">

カテゴリスタイルをタイプスケールに (またはタイプスケールをカテゴリスタイルへ) 設定または取得するための複数の mixins と関数があります。以下は mixins と関数です。

igx-type-style [関数] - タイプスケールカテゴリで使用されるスタイルルールのセットを返します。
igx-type-scale [関数] - 13 スタイルカテゴリのセットを返します。
igx-type-scale-category [関数] - タイプスケールとカテゴリのスタイルルールのマップを返します。
igx-type-style [mixin] - スタイルルールを特定のタイプスケールとカテゴリからセレクターへ追加します。
igx-typography [mixin] - グローバルアプリケーションタイポグラフィスタイルを定義します。

次に上記の各 mixins と関数の機能について説明します。

タイプスタイル

igx-type-style 関数はインターフェイスのような関数で特定の引数をスケールカテゴリのスタイルセットの一部として渡します。たとえば、h1 スケールカテゴリに新しいスタイルルールのセットを定義する場合などです。以下はコード例です。

$h1-style: igx-type-style(
    $font-size: 112px,
    $font-weight: 600,
    $line-height: 96px
);

Note

$font-family, letter-spacing などの渡さないプロパティは、スタイルを使用したいカテゴリの $default-type-scale で指定したデフォルト値で自動的に置き換えられます。

タイプスケール

タイプスケールは、すべての 13 スケールカテゴリのタイプスタイルのマップです。新しいタイプマップの生成は、以下の Sass を記述します。

$my-type-scale: igx-type-scale();

コードは、igx-typography mixin がデフォルトで使用する $default-scale-map と同じマップを生成します。

いくつか変更を加えたタイプスケールを生成した前の例で定義した $h1-style を使用できます。

$my-type-scale: igx-type-scale($h1: $h1-style);

$my-type-scale は、h1 カテゴリスケールに指定した変更を含む変更済みのタイプスケールを保存します。

Note

13 カテゴリスケールは、それぞれにタイプスタイルを渡して自由に変更できます。

タイポグラフィ Mixin

タイポグラフィ mixin は、ネイティブ h1-h6 と p 要素の外観を含むアプリケーションのグローバルタイポグラフィスタイルを定義します。

現在 2 引数を受け付けます。

$font-family - グローバルフォントファミリがアプリケーションで使用されます。
$type-scale - デフォルトタイプスケールがアプリケーションで使用されます。

デフォルトタイポグラフィを上書きする場合、igx-core mixin の後に igx-typography mixin を含む必要があります。上記で定義したタイプスケール $my-type-scale の利点を活用するためにデフォルトタイプスケールにしました。

@include igx-typography(
    $font-family: "'Roboto', sans-serif",
    $type-scale: $my-type-scale,
);

カスタムタイプスタイル設定

igx-type-style mixin は、特定のタイプスケールからスケールカテゴリのスタイルルールを取得するために使用できます。更にその他のスタイルルールも追加できます。

.my-fancy-h1 {
    @include igx-type-style($my-type-scale, 'h1') {
        color: royalblue;
    }
}

上記のコードは、royalblue 色に設定した color プロパティと $my-type-scale の h1 スケールカテゴリのすべてのスタイルルールを含むクラススタイルセクター .my-fancy-h1 を生成します。任意の要素のクラスを .my-fancy-h1 に設定した場合、その他の h1 要素と同様の外観ですが色は royalblue になります。

コンポーネントタイポグラフィ

Ignite UI for Angular のほとんどのコンポーネントは、テキストのスタイル設定にスケールカテゴリを使用します。たとえば、igx-card 紺ポーン干支は以下のスケールカテゴリを使用します。

h5 - カードタイトルのスタイル設定に使用します。
subtitle-2 - カードのサブタイトルと小タイトルのスタイル設定に使用します。
body-2 - カードテキストコンテンツのスタイル設定に使用します。

カードのテキストスタイルの変更には 2 つの方法があります。タイポグラフィ mixin へ渡す デフォルトタイプスケール の h5、subtitle-2、body-2 をすべてまたはそのいずれかを変更し、カードのタイトルを小さくしたい場合、h5 スケールカテゴリの font-size を変更します。

// Create a custom h5 scale category style
$my-h5: igx-type-style($font-size: 18px);

// Create a custom type scale with the modified h5
$my-type-scale: igx-type-scale($h5: $my-h5);

// Pass the custom scale to the global typography mixin
@include igx-typography($type-scale: $my-type-scale);

上記コードは h5 スケールカテゴリをグローバルに変更するため、h5を使用するすべてのコンポーネントのルックアンドフィールに影響します。すべての h5 要素の外観が同じになるため、アプリ全体が統一した外観になります。igx-card コンポーネントのように h5 を特定のコンポーネントのみに適用したい場合、カテゴリ構成同様にタイプスケール自体を受け付ける各コンポーネントのタイポグラフィ mixin を使用します。

// Create a custom h5 scale category style
$my-h5: igx-type-style($font-size: 18px);

// Create a custom type scale with the modified h5
$my-type-scale: igx-type-scale($h5: $my-h5);

// Pass the custom scale to the card typography mixin only
@include igx-card-typography($type-scale: $my-type-scale);

$my-type-scale スケールに h5 カテゴリの変更を渡した場合に igx-typography mixin は含まれなくなります。作成したカスタムスケールを igx-card-typography mixin へ渡します。$my-type-scale スケールを使用するコンポーネントはカードのみになります。

タイポグラフィスタイル mixins は、特定のセレクターにスコープできます。カスタムのカードタイポグラフィをクラス名が my-cool-card のすべての igx-card コンポーネントに適用する場合、

//...
.my-cool-card {
    @include igx-card-typography($type-scale: $my-type-scale);
}

タイポグラフィコンポーネント mixins は、2 つ目の引数 - $categories を取得します。コンポーネントのどのパーツがどのタイポグラフィスケールカテゴリを使用するかを構成するために使用されます。たとえば、カスタムカードのタイトルにh5 以外のスケールカテゴリを使用する場合にも変更できます。

@include igx-card-typography(
    $type-scale: $my-type-scale,
    $categories: (
        title: 'h6'
    )
);

カードコンポーネントは、overline スケールカテゴリをタイトルのスタイル設定に使用します。ユーザーは異なるタイプスケールをカードの各テキスト部分に割り当ててカードタイポグラフィ全体を見直すことができます。

CSS クラス

タイプスケールカテゴリに基づいてすべてのコンポーネントにテキストスタイルの追加する他、デフォルトの h1-h6 と p 要素のスタイルも設定します。また、スタイル設定とセマンティックスは区別します。たとえば、igx-typography の使用時に h1 タグにデフォルトのスタイル設定がある場合も igx-typography__h3 クラスを使用して h3 に変更できます。

<h1 class="igx-typography__h3">Some text</h1>

以下は、デフォルトで提供される全 CSS クラス一覧です。

igx-typography__h1
igx-typography__h2
igx-typography__h3
igx-typography__h4
igx-typography__h5
igx-typography__h6
igx-typography__subtitle-1
igx-typography__subtitle-2
igx-typography__body-1
igx-typography__body-2
igx-typography__button
igx-typography__caption
igx-typography__overline

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

タイポグラフィ

使用方法

Important

タイプ スタイル

Note

タイプ スケール

Note

タイポグラフィ Mixin

カスタム タイプ スタイル設定

コンポーネント タイポグラフィ

CSS クラス

その他のリソース

テーマ設定

タイプスタイル

タイプスケール

カスタムタイプスタイル設定

コンポーネントタイポグラフィ