アダプティブフォームコンポーネントのインラインスタイル設定 inline-styling-of-adaptive-form-components
アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。
アダプティブフォームの全体的な外観とスタイルは、テーマエディターでスタイルを指定して定義できます。また、アダプティブフォームの個々のコンポーネントにインライン CSS スタイルを適用し、即座に変更をプレビューすることもできます。インラインスタイルは、テーマで設定されたスタイルよりも優先されます。
インライン CSS プロパティを適用 apply-inline-css-properties
コンポーネントにインラインスタイルを追加するには、次の手順を実行します。
-
フォームエディターからフォームを開き、モードをスタイルモードに変更します。モードをスタイルモードに変更するには、ページツールバーで /スタイル を選択します。
-
ページ内のコンポーネントを選択し、編集ボタン を選択します。サイドバーにスタイルのプロパティが開きます。
サイドバーのフォーム階層ツリーからコンポーネントを選択することもできます。フォーム階層ツリーは、サイドバーでフォームオブジェクトとして使用できます。
スタイルモードでは、フォームオブジェクトの下にコンポーネントが表示されます。ただし、サイドバーのフォームオブジェクトリストには、フィールドやパネルなどのコンポーネントが一覧表示されます。フィールドとパネルは、テキストボックスやラジオボタンなどのコンポーネントを含めることができる汎用コンポーネントです。
サイドバーからコンポーネントを選択すると、選択したコンポーネントのすべてのサブコンポーネントのリストと選択したコンポーネントのプロパティが表示されます。特定のサブコンポーネントを選択して、そのスタイルを設定できます。
-
サイドバーのタブをクリックして、CSS プロパティを指定します。次のようなプロパティを指定できます。
- 寸法と位置(表示設定、パディング、高さ、幅、余白、位置、z インデックス、フロート、クリア、オーバーフロー)
- テキスト(フォントファミリー、太さ、色、サイズ、行の高さ、整列)
- 背景(画像とグラデーション、背景色)
- 境界線(幅、スタイル、色、半径)
- 効果(シャドウ、不透明度)
- 詳細(コンポーネントのカスタム CSS を作成できます)
-
同様に、コンポーネントの他の部分(ウィジェット、キャプション、ヘルプなど)のスタイルを適用できます。
-
「完了」を選択して変更を確定するか、または「キャンセル」を選択して変更を破棄します。
例:フィールドコンポーネントのインラインスタイル example-inline-styles-for-a-field-component
以下の図は、インラインスタイルが適用される前後のテキストフィールドを示しています。
インラインスタイルプロパティを適用する前のテキストボックスコンポーネント
次の図に示すように、以下の CSS プロパティを適用した後のテキストボックススタイルの変化に注目してください。
インラインスタイルプロパティを適用した後のテキストボックスコンポーネント
上述の手順に従って、他のコンポーネント(パネル、送信ボタン、ラジオボタンなど)を選択し、そのスタイルを設定できます。
スタイルをコピー&ペースト copy-paste-styles
アダプティブフォーム内のあるコンポーネントから別のコンポーネントにスタイルをコピーして貼り付けることもできます。スタイル モードで、コンポーネントを選択し、「コピー」アイコン をクリックします。
同じタイプの別のコンポーネントを選択し、「ペースト」アイコン をタップして、コピーしたスタイルをペーストします。「スタイルを消去」アイコン を選択して、適用したスタイルを消去することもできます。
コンポーネントの異なる状態にスタイルを設定 set-styles-for-states
コンポーネントタイプの状態ごとにスタイルを設定できます。状態には、フォーカス、無効、ホバー、エラー、成功、必須が含まれます。
コンポーネントの状態のスタイル設定を定義するには、次の手順を実行します。
-
スタイル モードで、コンポーネントを選択し、「編集」アイコン を選択します。
-
「状態」ドロップダウンリストを使用して、コンポーネントの状態を選択します。
-
コンポーネントの選択した状態のスタイル設定を定義し、「 」を選択してプロパティを保存します。
成功状態とエラー状態をシミュレートすることもできます。「展開」アイコンを選択して、「成功をシミュレート」および「エラーをシミュレート」オプションを表示します。
関連トピック see-also
- AEM アダプティブフォームの作成
- AEM Sites ページへ AEM アダプティブフォームを追加
- AEM アダプティブフォームへテーマを適用
- AEM アダプティブフォームへコンポーネントを追加
- AEM アダプティブフォームでの Captcha の使用
- AEM アダプティブフォームの PDF バージョン(DoR)を生成
- AEM アダプティブフォームを翻訳
- フォームの使用状況を追跡するアダプティブフォームの Adobe Analytics を有効にする
- Microsoft SharePoint へアダプティブフォームを接続
- Microsoft Power Automate へアダプティブフォームを接続
- Microsoft OneDrive へアダプティブフォームを接続
- Microsoft Azure Blob Storage へアダプティブフォームを接続
- Salesforce へアダプティブフォームを接続
- AEM アダプティブフォームで Adobe Sign を使用
- アダプティブフォームの新しいロケールを追加
- データベースへアダプティブフォームデータを送信
- REST エンドポイントへアダプティブフォームデータを送信
- AEM ワークフローへアダプティブフォームデータを送信
- フォームポータルを使用して AEM web サイト上の AEM アダプティブフォームを一覧表示
- アダプティブフォームへのバージョン管理、コメント、注釈の追加
- アダプティブフォームの比較