表單按鈕元件(v1)

核心元件表單按鈕元件允許在表單中包含按鈕欄位以觸發操作。

使用狀況

核心元件表單按鈕元件允許建立按鈕欄位,通常用於觸發表單的提交,並與表單容器元件一起使用。

按鈕屬性可由configure dialog中的內容編輯器定義。

版本和相容性

本檔案說明Form Button元件的v1,此元件最初是隨6.3版核心元件的1.0.0版一起AEM推出。

下表列出表單按鈕元件v1的相容性。

版AEM本 表單按鈕元件v1
6.3 相容
6.4 相容
注意

本檔案說明「表單按鈕元件」的v1。

有關當前版本的「表單按鈕元件」的詳細資訊,請參閱表單按鈕元件文檔。

元件輸出示例

以下範例取自We.Retail

螢幕擷圖

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

"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"
            }
注意

從核心元件匯出JSON需要1.1.0版的核心元件。 如需詳細資訊,請參閱核心元件v1](/docs/experience-manager-core-components/versions.html?lang=zh-Hant)的[相容性資訊。

配置對話框

配置對話框允許內容作者定義按鈕的參數。

  • 類型

    • 按鈕
    • 提交
  • Title —— 按鈕上顯示的文字

    • 如果沒有提供,則預設為按鈕類型
  • 名稱 -按鈕的名稱,隨表單資料提交

  • Value —— 隨表單資料提交的按鈕值

設計對話框

「表單按鈕」元件沒有設計對話方塊。

技術詳細資訊

有關表單按鈕元件的最新技術檔案可在GitHub上找到。

您可從GitHub下載整個核心元件專案。

有關開發核心元件的詳細資訊,請參閱核心元件開發人員檔案

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now