アダプティブフォームコンポーネントのインラインスタイリング inline-styling-of-adaptive-form-components

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

アダプティブフォームの全体的な外観とスタイルは、 テーマエディター. また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、変更をその場でプレビューすることもできます。 インラインスタイルは、テーマで設定されたスタイルよりも優先されます。

インライン CSS プロパティを適用 apply-inline-css-properties

コンポーネントにインラインスタイルを追加するには、次の手順を実行します。

  1. フォームエディターでフォームを開き、モードをスタイルモードに変更します。 モードをスタイルモードに変更するには、ページツールバーで canvas-drop-down スタイル ​をタップします。

  2. ページ内のコンポーネントを選択し、編集ボタン edit-button をタップします。スタイル設定プロパティがサイドバーに開きます。

    サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。 フォーム階層ツリーは、サイドバーでフォームオブジェクトとして使用できます。

    サイドバーからコンポーネントを選択することもできます。 スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストには、フィールドやパネルなどのコンポーネントが一覧表示されます。 フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含むことができる汎用コンポーネントです。

    サイドバーからコンポーネントを選択すると、リストに表示されたすべてのサブコンポーネントと、選択したコンポーネントのプロパティが表示されます。 特定のサブコンポーネントを選択してスタイルを設定できます。

  3. サイドバーのタブをクリックして、CSS プロパティを指定します。 次のようなプロパティを指定できます。

    • 寸法と位置(表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー)
    • テキスト(フォントファミリー、太さ、色、サイズ、行の高さ、整列)
    • 背景(画像とグラデーション、背景色)
    • 境界線(幅、スタイル、色、半径)
    • 効果(影、透明度)
    • 詳細(コンポーネントのカスタム CSS を作成できます)
  4. 同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。

  5. 完了」をクリックして変更を確定するか、または「キャンセル」をクリックして変更を破棄します。

例:フィールドコンポーネントのインラインスタイル example-inline-styles-for-a-field-component

以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。

インラインスタイルが適用される前のテキストボックスコンポーネント

インラインスタイルプロパティを適用する前のテキストボックスコンポーネント

次の画像に示すように、次の CSS プロパティを適用した後のテキストボックススタイルの変更に注意してください。

セレクター
CSS プロパティ
効果
フィールド
境界線

境界線の幅=2px

境界線のスタイル=実線

境界線のカラー=#1111

フィールドの周囲に黒い 2px 幅の境界線を作成します
テキストボックス
背景色
#6495ED

背景色を CornflowerBlue (#6495ED) に変更します。

注意:値フィールドには、カラー名またはその 16 進コードを指定できます。

ラベル
寸法と位置/幅
100 px
ラベルの幅を 100 px に固定します
フィールドヘルプアイコン
テキスト/フォントカラー
#2ECC40
ヘルプアイコンの色を変更します。
詳細な説明
text-align
中央
ヘルプの長い説明を中央に揃えます

インラインスタイルが適用された後のテキストボックスのスタイル
図: インラインスタイルプロパティを適用した後のテキストボックスコンポーネント

上記の手順に従って、パネル、送信ボタン、ラジオボタンなど、他のコンポーネントを選択してスタイルを設定できます。

NOTE
スタイルのプロパティは、選択したコンポーネントにより異なります。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da