アダプティブフォームの全体的な外観とスタイルは、テーマエディターでスタイルを指定して定義できます。また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、即座に変更をプレビューすることもできます。インラインスタイルは、テーマで設定されたスタイルよりも優先されます。
コンポーネントにインラインスタイルを追加するには、次の手順を実行します。
フォームエディターからフォームを開き、モードをスタイルモードに変更します。モードをスタイルモードに変更するには、ページツールバーで /スタイルをタップします。
ページ内のコンポーネントを選択し、編集ボタン をタップします。サイドバーにスタイルのプロパティが開きます。
サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。フォーム階層ツリーは、サイドバーのフォームオブジェクトとして使用できます。
スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストにはフィールドやパネルなどのコンポーネントが表示されます。フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含めることができる汎用的なコンポーネントです。
サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。
サイドバーのタブをクリックして、CSS プロパティを指定します。次のようなプロパティを指定できます。
同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。
「完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。
以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。
インラインスタイルプロパティを適用する前のテキストボックスコンポーネント
次の図に示すように、以下の CSS プロパティを適用した後のテキストボックススタイルの変化に注目してください。
セレクター |
CSS プロパティ |
値 |
効果 |
フィールド |
境界線 |
境界線の幅=2px 境界線のスタイル=実線 境界線のカラー=#1111 |
フィールドの周囲に黒色の 2px 幅の境界線を作成 |
テキストボックス |
背景色 |
#6495ED |
背景色を CornflowerBlue (#6495ED)に変更 注:値フィールドには、カラーの名前または 16 進数コードを指定できます。 |
ラベル |
寸法と位置/幅 |
100px |
ラベルの幅を 100px に固定 |
フィールドヘルプアイコン | テキスト/フォントカラー | #2ECC40 | ヘルプアイコンの表面の色を変更します。 |
詳細な説明 |
テキストの整列 |
中央 |
長いヘルプ説明を中央揃えにする |
インラインスタイルプロパティを適用した後のテキストボックスコンポーネント
上述の手順に従って、他のコンポーネント(パネル、送信ボタン、ラジオボタンなど)を選択し、そのスタイルを設定できます。
スタイルのプロパティは、選択したコンポーネントにより異なります。
アダプティブフォーム内のあるコンポーネントから別のコンポーネントにスタイルをコピーして貼り付けることもできます。スタイルモードで、コンポーネントをタップし、コピーアイコンをタップします。
同じ種類の別のコンポーネントをタップし、貼り付けアイコンをタップして、コピーしたスタイルを貼り付けます。スタイルを消去アイコン
をタップして、適用したスタイルを消去することもできます。
コンポーネントタイプの状態ごとにスタイルを設定できます。状態には、フォーカス、無効、ホバー、エラー、成功、必須が含まれます。
コンポーネントの状態のスタイル設定を定義するには、次の手順を実行します。
スタイルモードで、コンポーネントをタップし、編集アイコンをタップします。
「状態」ドロップダウンリストを使用して、コンポーネントの状態を選択します。
コンポーネントの選択した状態のスタイル設定を定義し、「」をタップしてプロパティを保存します。
成功状態とエラー状態をシミュレートすることもできます。展開アイコンをタップして、「成功をシミュレート」および「エラーをシミュレート」表示を選択します。