アダプティブフォームコンポーネントのインラインスタイリング inline-styling-of-adaptive-form-components
アダプティブフォームの全体的な外観とスタイルは、 テーマエディター. また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、変更をその場でプレビューすることもできます。 インラインスタイルは、テーマで設定されたスタイルよりも優先されます。
インライン CSS プロパティを適用 apply-inline-css-properties
コンポーネントにインラインスタイルを追加するには、次の手順を実行します。
-
フォームエディターでフォームを開き、モードをスタイルモードに変更します。 モードをスタイルモードに変更するには、ページツールバーで /スタイル をタップします。
-
ページ内のコンポーネントを選択し、編集ボタン をタップします。スタイル設定プロパティがサイドバーに開きます。
サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。 フォーム階層ツリーは、サイドバーでフォームオブジェクトとして使用できます。
サイドバーからコンポーネントを選択することもできます。 スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストには、フィールドやパネルなどのコンポーネントが一覧表示されます。 フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含むことができる汎用コンポーネントです。
サイドバーからコンポーネントを選択すると、リストに表示されたすべてのサブコンポーネントと、選択したコンポーネントのプロパティが表示されます。 特定のサブコンポーネントを選択してスタイルを設定できます。
-
サイドバーのタブをクリックして、CSS プロパティを指定します。 次のようなプロパティを指定できます。
- 寸法と位置(表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー)
- テキスト(フォントファミリー、太さ、色、サイズ、行の高さ、整列)
- 背景(画像とグラデーション、背景色)
- 境界線(幅、スタイル、色、半径)
- 効果(影、透明度)
- 詳細(コンポーネントのカスタム CSS を作成できます)
-
同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。
-
「完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。
例:フィールドコンポーネントのインラインスタイル example-inline-styles-for-a-field-component
以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。
インラインスタイルプロパティを適用する前のテキストボックスコンポーネント
次の画像に示すように、次の CSS プロパティを適用した後のテキストボックススタイルの変更に注意してください。
図: インラインスタイルプロパティを適用した後のテキストボックスコンポーネント
上記の手順に従って、パネル、送信ボタン、ラジオボタンなど、他のコンポーネントを選択してスタイルを設定できます。