アダプティブフォームのスタイル構成 styling-constructs-for-adaptive-forms
前提条件 prerequisites
CSS と LESS フレームワークに関する知識
カスタマイズの対象 what-can-be-customized
この記事では、アダプティブフォームで公開されている css クラスの一覧を示します。 これらのクラスを使用して、アダプティブフォームの様々なコンポーネントのスタイルを設定することができます。警告を表示するダイアログやステータスバーなどのオーサリングコンポーネントのスタイル設定は、この記事の範囲外です。 これらのスタイル構成を使用して、を使用してコンポーネントのスタイルを設定できない場合にのみ、スタイル(CSS または LESS を使用)を作成します テーマエディター.
アダプティブフォームのスタイルのカスタマイズ customizing-styles-in-adaptive-forms
LESS フレームワークは、アダプティブフォームのスタイルをカスタマイズするユースケースを簡素化します。 フレームワークでは、変数や関数のセット(Mixin)を使用したスタイルの定義が可能です。LESS フレームワークにより、バンドルされているコードのサイズを減らし、コードの再利用率を高めることができます。
アダプティブフォームのスタイルは、次の方法でカスタマイズできます。
- テーマの変更
- コンポーネントのスタイルを変更
テーマの変更 changing-theme
アダプティブフォームのテーマは、アダプティブフォームが埋め込まれている web ページと外観が一致するように変更することができます。
テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームのルック&フィールへの大幅な変更は、テーマの変更とは見なされません。
Web ページのテーマは、ブートストラップに基づき、以下の CSS プロパティによって定義されます。
- 背景色
- 境界線(種類、色、太さ)
- フォントカラー
- パディング
- 余白
- フォントサイズ
- 行の高さ
現在、LESS 変数は、アダプティブフォーム内の様々な要素のこれらのプロパティに対してのみ定義されています。
コンポーネントスタイルの変更 changing-component-style
要素の外観、レイアウト、配置、可視性を変更できます。そのためには、カスタムの .css ファイルを作成または更新し、この記事で説明するスタイル構成をそのファイルに含める必要があります。
アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。
コンポーネント components
この記事で説明するコンポーネントには、事前に定義された CSS クラスがあります。 変数を編集して、CSS クラスのスタイルを変更できます。 または、クラス全体を書き換えることもできます。 このセクションでは、変数を使用して変更できるコンポーネントとスタイル内のクラスを説明します。
コンテナのスタイル設定 container-styling
コンテナは、最上位のコンポーネントです。他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。
フィールドのスタイル設定 field-styling
アダプティブフォームには、様々なタイプのフィールドが含まれています。 各フィールドには一意のクラス名があり、それがフィールドの名前となっています。また、フィールドには、guideFieldNode
という共通のクラス名もあります。
フィールドには、ラベル、ウィジェット、ヘルプの説明(詳細な説明と短い説明の両方)、フィールドヘルプアイコン(クエスチョンマーク)が含まれています。
ラベルのスタイル設定 label-styling
フィールドに使用される HTML 要素 label には、ラベルが上にあるか左にあるかによって、left または top のクラスが含まれます。
ラベルに対する CSS ルールは、guideFieldLabel ラベルを使用して適用されます。カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。
ウィジェットのスタイル設定 widgets-styling
タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget
クラスが含まれています。HTMLに付属するウィジェットは通常、標準のHTML要素の入力と選択を使用します。 スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。
ウィジェットのスタイル設定の制限 limitations-in-widget-styling
変数を使用した、フォーカスされたフィールド、必須フィールド、無効フィールドのスタイル設定は制限されています。 ただし、スタイルを上書きして変更することはできます。 変数の使用に関する制限は、主に変数の数を抑えるために提供されます。 制限は、フィールドの外観が大きく変更され、前述の状態のいずれかにある場合に緩和できます。
ヘルプの説明 help-description
作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .guideHelpDescription
を持っており、説明のタイプによって、もう 1 つのクラス .long
/.short
を持っています。ヘルプコンテンツは、説明のスタイル設定を上書きする段落要素で囲まれています。ヘルプの説明(詳細な説明と短い説明の両方)は、以下の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。
利用条件 terms-and-conditions
利用条件(TnC ``)ウィジェットでは、利用条件を指定できます。このウィジェットは、以下の表で説明する変数を使用してカスタマイズできます。
ボタン button
ボタンもウィジェットの 1 つです。ただし、そのスタイル設定はウィジェットとは少し異なります。 アダプティブフォームでは、以下のいずれかがボタンを構成します。
- input[type = text]
- button
- .button クラスを持つ要素
HTMLのボタンコード:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
疑問符 question-mark
ウィジェットの場合、作成者がヘルプコンテンツに詳細な説明を追加すると、疑問符が表示されます。 ブートストラップで指定されるデフォルトのアイコンが使用されます。 カスタムアイコンを使用するには、ブートストラップアイコンをカスタマイズします。
テーブル table
テーブル内のヘッダーおよびボディ行のカラーテーマは、以下の変数を使用して変更できます。
ファイル添付 file-attachment
アダプティブフォームのファイル添付ウィジェットを使用して、ファイルをアップロードできます。 変数を使用してウィジェットをカスタマイズすることもできます。
ナビゲータースタイル navigator-styles
ナビゲータータブには 4 つのタイプがあります。 これには、左側、上部、ウィザード、アコーディオンのタブが含まれます。 各ナビゲーターは異なるクラスを持ちます。
以下に示すのは、タブナビゲーター要素(ブートストラップタブに類似する)の HTML コードです。
<li>
tab title
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></span>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
descendant セレクターで要素を選択する CSS ルールを使用して、ナビゲーターのスタイル設定を変更できます。例えば、アンカータグにテキスト装飾スタイルを追加するには、以下のようにします。
上部のタブナビゲーター:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
さらに、入れ子のナビゲーターの有無に基づいて、タブナビゲーター(左側と上部の両方)のスタイル設定を行うためのクラスがあります。
guideNavIcon クラスは、タブナビゲーター(左と上の両方)とウィザードナビゲーターにデフォルトのアイコンを提供します。
パネルのスタイル設定 panel-styling
パネルには、オプションのツールバーとそのコンテンツが含まれます。
パネルノードは、ナビゲーターとコンテンツに分かれています。 コンテンツ用の別のスタイル設定コンポーネントはありません。
説明された変数は、コンテンツだけでなくナビゲーターにも適用されます。
&ast;最上位のパネル (RootPanel) にはこのクラスはありません。
モバイルのスタイル設定 mobile-styling
ヘッダーバー header-bar
これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ/前へのナビゲーターを含むバーのことです。
スクロールインジケーター scroll-indicator
これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターは、モバイルデバイスまたは小さい画面デバイスに表示されるオレンジ色の矢印です。 スクロールインジケーターは、画面の表示されている部分を超えたコンテンツがあることを示します。 下にスクロールして表示できます。 矢印は、コンテンツの最後に到達すると消えます。
モバイル固定ツールバーのレイアウト固有の変数 mobile-fixed-toolbar-layout-specific-variables
以下の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。