フォームボタンコンポーネント（v1） form-button-component-v
コアコンポーネントのフォームボタンコンポーネントを使用すれば、アクションをトリガーするボタンフィールドをフォームに含めることができます。
使用方法 usage
コアコンポーネントのフォームボタンコンポーネントを使用すれば、フォームの送信をトリガーすることが多いボタンフィールドを作成できます。このコンポーネントは、フォームコンテナコンポーネントと共に使用するためのものです。
ボタンのプロパティは、コンテンツ編集者が設定ダイアログで定義できます。
バージョンと互換性 version-and-compatibility
このドキュメントでは、AEM 6.3 に付属しているコアコンポーネントのリリース 1.0.0 で最初に導入されたフォームボタンコンポーネント v1 について説明します。
フォームボタンコンポーネント v1 の互換性を次の表に示します。
コンポーネント出力のサンプル sample-component-output
以下は We.Retail から取得したサンプルです。
スクリーンショット screenshot
HTML html
<div class="cmp cmp-button aem-GridColumn aem-GridColumn--default--12">
<div class="cmp cmp-button">
<button type="BUTTON" class="btn btn-action btn-primary" name="loveToast" value="ILoveToast">
Click here if you love toast!
</button>
</div>
</div>
JSON json
"container": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"columnCount": 12,
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
":items": {
"button": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
":type": "weretail/components/form/button",
"name": "loveToast",
"jcr:title": "Click here if you love toast!",
"type": "submit",
"value": "ILoveToast"
}
},
":itemsOrder": [
"button"
],
":type": "weretail/components/form/container"
}
設定ダイアログ configure-dialog
設定ダイアログでは、コンテンツ作成者がボタンのパラメーターを定義できます。
-
種類
- ボタン
- 送信
-
タイトル - ボタンに表示されるテキスト
- 指定しない場合は、デフォルトでボタンの種類が表示されます
-
名前 - ボタンの名前（フォームデータと共に送信されます）
-
値 - ボタンの値（フォームデータと共に送信されます）
デザインダイアログ design-dialog
フォームボタンコンポーネントにはデザインダイアログはありません。
技術的詳細 technical-details
フォームボタンコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントプロジェクト全体を GitHub からダウンロードできます。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。