テーマ

最小限のコードで、コンポーネントのテーマを簡単に変更できます。SASS で開発されている API は簡単で、単一のコンポーネント、複数のコンポーネント、またはすべてのコンポーネントでテーマをカスタマイズできます。

概要

Ignite UI for Angular はコンポーネントのデザインをマテリアル デザイン ガイドラインに基づき、Google によって作成されたコンポーネントの色、サイズ、タイポグラフィ、およびルックアンドフィールにできるだけ近づけるようデザインしています。

テーマのアプローチは、複数のシンプルな概念に基づきます。

Note

Ignite UI for Angular テーマ ライブラリは Sass に基づいて実装されます。アプリケーションをブートストラップするために Ignite UI CLI を使用した場合、angular.json 構成ファイルでスタイルを scss に設定すると、CLI は Sass スタイルをコンパイルします。Ignite UI CLI を使用しなかった場合、ビルダーを Sass スタイルをコンパイルするために構成する必要があります。

パレット

最初の概念は色パレットです。ビジュアル ツールでは、アプリケーションを差別化する色があります。マテリアル デザイン ガイドラインでは基本色の色合いおよび輝度の範囲がある定義済みの色パレットを規定しています。それによって、色が調和し、背景色および前景のテキスト色とコントラストを保つことができます。ただし色が制限されるため、ブランド化と一致するカスタム パレットを使用することはできません。この問題を回避するため、ユーザーが提供する基本色からマテリアル デザインのようなパレットを生成するアルゴリズムが使用できます。更にパレットで各色合いにコントラスト テキスト色を生成します。

スキーマ

2 番目に重要なコンセプトはテーマのスキーマです。テーマのスキーマは、コンポーネント テーマのレシピのようなものです。色、マージン、パディングなど各コンポーネント テーマの情報を提供します。たとえば、コンポーネント スキーマはコンポーネント テーマに要素の背景色が primary パレットの 500 バリアントであることを伝えます。ただし、ユーザーがコンポーネント テーマに渡すパレットは無視します。

テーマ

最後にコンポーネント テーマがあります。パレットとスキーマは、テーマと一緒に使用する必要があります。パレットは通常テーマで使用します。各コンポーネントにはテーマがあり、アプリケーション全体および含まれる各コンポーネントをスタイル設定するグローバル テーマもあります。生成したパレットとスキーマをグローバル テーマへ渡すと残りは自動で処理されます。各コンポーネントのスタイルを個別にカスタマイズすることもできます。

タイポグラフィ

Typography は Sass theming フレームワークは別でコンポーネント テーマから分離したモジュールです。デフォルトで使用されるタイポグラフィもありますが、アプリケーションのスタイル設定をさらにカスタマイズできます。タイポグラフィはスタイル設定で中心的な役割を担います。アプリケーションで見出し、サブ見出し、ボタン、本文などのフォント ファミリ、サイズ、ウェイトを変更するメソッドを提供します。

その他のリソース

グローバル テーマの作成方法:

コンポーネント スキーマの作成する方法:

色パレットを作成する方法:

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