アダプティブフォームにおけるセパレータコンポーネント separator-component-in-adaptive-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

セパレータコンポーネントを使用して、フォームのパネルを視覚的に区別できます。セパレータコンポーネントの全体的な外観やスタイルは、次のようなセパレータコンポーネントのプロパティを指定して定義できます。

要素名：コンポーネント名を指定します。SOM 式は、要素名フィールドで指定された値を持つコンポーネントに対応しています。
太さ： セパレーターコンポーネントの太さをピクセル単位で指定します。
CSS クラス： セパレーターコンポーネントに対しカスタム CSS クラスを指定します。
インラインスタイル： AEM Forms では、インライン CSS スタイルをアダプティブフォームの各コンポーネントに適用し、変更のプレビューをリアルタイムでプレビューできるようになりました。

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

セパレータコンポーネントのプロパティを指定するには：

セパレータコンポーネントを選択して、を選択します。プロパティがサイドバーで開きます。
「インライン CSS プロパティ」セクションでタブをクリックし、CSS プロパティを指定します。例えば、「フィールド」タブで「アイテムの追加」をクリックします。2 つのフィールドを持った行が追加されます。
左から最初のフィールドで、適用したい CSS3 プロパティを指定します。例えば、ボーダー を指定します。下矢印をクリックしてプロパティを選択することもできます。ドロップダウンリストに含まれているプロパティは一部であり、サポートされている CSS3 プロパティであればこのフィールドで任意に指定することができます。
隣接するフィールドには、指定された CSS3 プロパティに対して有効な値を指定します。例えば、「3px solid black」を指定します。
「アイテムの追加」をクリックし、次のプロパティとその値を追加します。
「プレビュー」をクリックし、フォームの変更をプレビューで表示します。
「OK」をクリックして変更を確認するか、または「キャンセル」をクリックして変更せずにダイアログを閉じます。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2