Bootstrap 対応のテーマを Ignite UI for jQuery 用にカスタマイズする場合は、テーマを正しく変更するために必要な特定の手順があります。テーマをカスタマイズする方法によって異なります。カスタマイズには、Bootstrap のスタイルの Ignite UI for jQuery のテーマへの追加し、LESS/SASS の変数の変更、jQuery UI コントロールのカスタマイズ、または Ignite UI for jQuery のコントロールの特別なカスタマイズなどが考えられます。このトピックは、Ignite UI for jQuery の Bootstrap 対応のテーマを構成する異なるファイル (およびそれらの用途) とテーマの変更に必要な手順について説明します。
Bootstrap 対応のテーマは、メインのテーマ ファイル (infragistics.theme.less / infragistics.theme.scss) からコンパイルされ、テーマを構成する値とルールを提供する他の多数の LESS ファイルへの参照を含みます。
以下の表は、メインのテーマ ファイルが参照するファイルとその用途を示します。
| ファイル名 | 目的 |
|---|---|
| variables.less / variables.scss | 包括的な Bootstrap 対応のテーマを作成する場合、variables ファイルは、Ignite UI for jQuery コントロール関連のスタイル ルールのみでなく、Bootstrap テーマの作成に必要なすべてのスタイル ルールを含みます。 |
| framework.less / framework.scss | framework ファイルは、jQuery UI ネイティブ コントロールに必要な構造スタイル ルールを含みます。ここにはテーマに関連したスタイルがないため、ネイティブ コントロール構造の変更が必要ない限り、ファイルを変更することはありません。 |
| infragistics.jqueryui.theme.less / infragistics.jqueryui.theme.scss | infragistics.jqueryui.theme ファイルは、テーマで jQuery UI ウィジェットのスタイル変更に関連するすべてのスタイル ルールを含みます。 |
| infragistics.igniteui.theme.less / infragistics.igniteui.theme.scss | infragistics.igniteui.theme ファイルは、テーマで Ignite UI for jQuery コントロールのスタイル変更に関連するすべてのスタイル ルールを含みます。 |
Bootstrap テーマを Ignite UI for jQuery のテーマに統合する場合は、Bootstrap から取り込んだ変数を Ignite UI for jQuery のテーマで使用する必要があります。以下の手順では、統合する方法を紹介します。
\css\themes\bootstrap3、 \css\themes\bootstrap3\<theme name> または \css\themes\bootstrap4 にあります。変数ファイルの変更や選択した Bootstrap で置き換えることもできます。以下の「変数を変更してテーマをカスタマイズ」セクションをご覧ください。次に、テーマの中で使用するスプライトの確認が必要になります、またはテーマのカラー パレットによって異なりますが、スプライト イメージで使用する色の調整が必要になる場合があります。スプライト イメージは、images フォルダーで確認できます。スプライトの確定後、テキスト エディタで infragistics.theme.*ss ファイルを開きます。テーマで使用可能な 3 つの基本的なスプライトのアイコンがあります。
LESS の場合:
// Icon sprites
@ui-icons-darker: url(images/ui-icons_222222_256x240.png);
@ui-icons-dark: url(images/ui-icons_888888_256x240.png);
@ui-icons-light: url(images/ui-icons_ffffff_256x240.png);
ここで、さまざまな状態 (default、hover、active、 focused) のテーマの色に応じて、使用されているスプライトのアイコンが最も適切であることを確認する必要があります。_shared-styles/infragistics.jqueryui.theme.*ss ファイル内で関連するスタイル ルールを確認するには、次のようにアイコンと状態の領域でファイルを検索します。
LESS の場合:
/* Icons
----------------------------------*/
/* states and images */
各ルールが、テーマに対し適切なスプライトの位置で使用されていることを確認できます。また、例外と一部のコントロールに対して固有のオーバーライドがある点に注意してください。ほとんどの例外はエディタ コントロールに関するものです。したがって、各インスタンスに対し最適な選択が定義されていることを確認してください。
新しい変数を使用し、テーマを保存して再コンパイルします。
以下の手順では、Ignite UI for jQuery のテーマをカスタマイズするために変数を変更する箇所を示します。
テキスト エディターで variables.less または variables.scss ファイル (ベースとなるテーマに基づく) を開き、目的のデザインに応じて値を編集します。変数の名前は、すぐに識別が可能で、機能を表す名前を使用してください。たとえば、次のような変数セットがあります。
LESS の場合:
//** Background color for `<body>`.
@body-bg: #ffffff;
//** Global text color on `<body>`.
@text-color: #444444;
//** Global textual link color.
@link-color: #428bca;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
各変数に対して必要な値を設定してファイルを保存します。
infragistics.theme.*ss ファイルをテキスト エディタで開き、使用されているスプライトのアイコンを確認します (最初のメソッドの手順 2)。オンラインで表示: GitHub