アダプティブフォームにおけるセパレータコンポーネント

Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象： 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用したアダプティブFormsのオーサリングに関する古いアプローチについて説明します。

セパレーターコンポーネントを使用して、フォームのパネルを視覚的に区別することができます。区切り文字コンポーネントの次のプロパティを指定することで、区切り文字コンポーネントの全体的な外観とスタイルを定義できます。

• エレメント名： コンポーネントの名前を指定します。 SOM 式は、「要素名」フィールドで指定された値を持つコンポーネントを処理します。

• 太さ：​セパレーターコンポーネントの太さをピクセル単位で指定します。

• CSS クラス：​セパレーターコンポーネントに対しカスタム CSS クラスを指定します。

• インラインスタイル： AEM Forms では、インライン CSS スタイルをアダプティブフォームの各コンポーネントに適用し、変更のプレビューをリアルタイムでプレビューできるようになりました。

レイアウトモードを使用して、セパレーターコンポーネントがまたがる列数を定義できます。詳しくは、レイアウトモードを使用したコンポーネントのサイズ変更を参照してください。

区切り文字コンポーネントのプロパティを指定するには：

1. セパレーターコンポーネントを選択して、 をタップします。プロパティがサイドバーに開きます。
2. インライン CSS プロパティセクションのタブをクリックして、CSS プロパティを指定できます。 例： a.「フィールド」タブで、 項目を追加. 2 つのフィールドを持つ行が追加されます。
3. 左側の最初のフィールドで、適用する CSS3 プロパティを指定します。 例： ボーダー. 下向き矢印ボタンをクリックしてプロパティを選択することもできます。 ドロップダウンリストに含まれるプロパティがすべてではなく、サポートされている CSS3 プロパティの名前をこのフィールドで指定できます。
4. 隣接するフィールドで、指定した CSS3 プロパティに有効な値を指定します。 例： 3 px 実線（黒）.
5. 「アイテムの追加」をクリックし、次のプロパティとその値を追加します。
6. クリック プレビュー フォーム内の変更をプレビューできます。
7. クリック OK 変更を確定する場合、または キャンセル をクリックして、変更を加えずにダイアログを終了します。