セパレータコンポーネントを使用して、フォームのパネルを視覚的に区別することができます。セパレータコンポーネントの全体的な外観やスタイルは、次のセパレータコンポーネントのプロパティを指定することによって定義することができます。
- 要素名:コンポーネント名を指定します。SOM 式は、要素名フィールドで指定された値を持つコンポーネントに対応しています。
- 太さ:セパレータコンポーネントの太さをピクセル単位で 指定します。
- Colspan:セパレータコンポーネントの対象となる列数を指定します。
- CSS クラス:セパレータコンポーネントに対しカスタム CSS クラスを指定します。
- インラインスタイル: AEM Forms では、インライン CSS スタイルをアダプティブフォームの各コンポーネントに適用し、変更のプレビューをリアルタイムでプレビューできるようになりました。
セパレータコンポーネントのプロパティを指定するには:
- セパレータコンポーネントを選択し、
をタップします。 プロパティがサイドバーで開きます。
- インライン CSS プロパティセクションでタブをクリックし、CSS プロパティを指定します。例:「フィールド」タブで、「アイテムの追加」をクリックします。2 つのフィールドを持った行が追加されます。
- 左から最初の行で、適用したい CSS3 プロパティを指定します。例:border など。また、下矢印をクリックしてプロパティを選択することもできます。ドロップダウンリストに含まれているプロパティは一部であり、サポートされている CSS3 プロパティであればこのフィールドで任意に指定することができます。
- 隣接するフィールドで、指定された CSS3 プロパティに対し、有効な値を指定します。例:3px solid black など。
- 「アイテムの追加」をクリックし、次のプロパティとその値を追加します。
- 「プレビュー」をクリックし、フォームの変更をプレビューで表示します。
- 「OK」をクリックして変更を確定するか、「キャンセル」をクリックして変更なしでダイアログを終了します。