アダプティブフォームのスタイル構成

コンポーネント

この記事で説明されているコンポーネントには、CSS クラスが事前に定義されています。変数を編集して、CSS クラスでスタイルを変更できます。または、クラス全体を書き換えることもできます。 このセクションでは、変数を使用して変更できるコンポーネントとスタイル内のクラスを説明します。

コンテナのスタイル設定

コンテナは、最上位のコンポーネントです。他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。

フィールドのスタイル設定

アダプティブフォームには、様々なタイプのフィールドが含まれています。各フィールドには一意のクラス名があり、それがフィールドの名前となっています。また、フィールドには、guideFieldNode という共通のクラス名もあります。

フィールドには、ラベル、ウィジェット、ヘルプの説明（詳細な説明と短い説明の両方）、フィールドヘルプアイコン（クエスチョンマーク）が含まれています。

ラベルのスタイル設定

フィールドに使用される HTML 要素 label には、ラベルが上にあるか左にあるかによって、left または top のクラスが含まれます。

ラベルに対する CSS ルールは、guideFieldLabel ラベルを使用して適用されます。カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。

ウィジェットのスタイル設定

タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget クラスが含まれています。HTML に付属のウィジェットは通常、標準の HTML 要素 input と select を使用しています。スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。

ウィジェットのスタイル設定における制限事項

フォーカスされたフィールド、必須フィールド、および無効なフィールドのスタイル設定は、変数を使用して制限されます。ただし、スタイルを上書きすることで変更することができます。変数の使用における制限は、主に変数の数を抑えるために設けられています。制限は、フィールドの外観が大きく変更され、前述の状態のいずれかにある場合に緩和できます。

ヘルプの説明

作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .guideHelpDescription を持っており、説明のタイプによって、もう 1 つのクラス .long／.short を持っています。ヘルプコンテンツは、説明のスタイル設定を上書きする段落要素で囲まれています。ヘルプの説明（詳細な説明と短い説明の両方）は、以下の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。

利用条件

利用条件（TnC ``）ウィジェットでは、利用条件を指定できます。このウィジェットは、以下の表で説明する変数を使用してカスタマイズできます。

疑問符

ウィジェットでは、作成者がヘルプ コンテンツに長い説明を追加すると、疑問符が表示されます。ブートストラップで提供されるデフォルトのアイコンが使用されます。カスタムアイコンを使用するには、ブートストラップアイコンをカスタマイズします。

テーブル

テーブル内のヘッダーおよびボディ行のカラーテーマは、以下の変数を使用して変更できます。

ファイル添付

アダプティブフォームの添付ファイルウィジェットでは、ファイルをアップロードできます。変数を使用してウィジェットをカスタマイズすることもできます。

パネルのスタイル設定

パネルには、オプションのツールバーとそのコンテンツが含まれます。

パネルノードは、ナビゲーターとコンテンツに分かれています。コンテンツ用の別のスタイル設定コンポーネントはありません。 説明した変数は、ナビゲーターとコンテンツに適用されます。

最上部のパネル（RootPanel）にはこのクラスはありません。

モバイルのスタイル設定

ヘッダーバー

これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ／前へのナビゲーターを含むバーのことです。

スクロールインジケーター

これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターは、モバイルデバイスまたは小さな画面のデバイスに表示されるオレンジ色の矢印です。スクロールインジケーターは、画面の表示されている部分を超えたコンテンツがあることを示します。下にスクロールして表示できます。矢印は、コンテンツの最後に到達すると消えます。

モバイル固定ツールバーのレイアウト固有の変数

以下の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。