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

最終更新日: 2023-05-04
  • 作成対象:
  • User
注意

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

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

  • エレメント名: コンポーネントの名前を指定します。 SOM 式は、「要素名」フィールドで指定された値を持つコンポーネントに対応します。
  • 太さ:​セパレーターコンポーネントの太さをピクセル単位で指定します。
  • Colspan: 区切り文字コンポーネントがまたがる列数を指定します。
  • CSS クラス:​セパレーターコンポーネントに対しカスタム CSS クラスを指定します。
  • インラインスタイル: AEM Forms では、インライン CSS スタイルをアダプティブフォームの各コンポーネントに適用し、変更のプレビューをリアルタイムでプレビューできるようになりました。

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

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

このページ