表单按钮组件 (v1) form-button-component-v

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
核心组件

创建对象：

开发人员
管理员
用户

利用核心组件表单按钮组件，可在表单中包含按钮字段来触发操作。

用途 usage

利用核心组件表单按钮组件可以创建按钮字段（这通常会触发表单提交），并且此组件旨在与表单容器组件结合使用。

按钮属性可由内容编辑者在“配置”对话框中定义。

版本和兼容性 version-and-compatibility

本文档介绍了表单按钮组件 (v1)，它最初随带 AEM 6.3 的核心组件 1.0.0 版引入。

下表列出了表单按钮组件 (v1) 的兼容性。

AEM 版本

表单按钮组件 v1

6.3

兼容

6.4

兼容

CAUTION

本文档介绍了表单按钮组件 (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"
            }

NOTE

从核心组件执行 JSON 导出需要版本 1.1.0 的核心组件。有关更多信息，请参阅核心组件 v1 的兼容性信息。

“配置”对话框 configure-dialog

利用“配置”对话框，内容作者可以定义按钮的参数。

类型
- 按钮
- 提交
标题 - 按钮上显示的文本
- 如果未提供，则默认为按钮类型
名称 - 随表单数据一起提交的按钮的名称
值 - 随表单数据一起提交的按钮的值

“设计”对话框 design-dialog

表单按钮组件没有“设计”对话框。

技术详细信息 technical-details

在 GitHub 上可找到有关表单按钮组件的最新技术文档。

从 GitHub 可下载整个核心组件项目。

在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。

recommendation-more-help

d2be9096-a81e-404b-9952-d8925af7219c