標籤元件

核心元件標籤元件可讓內容組織到多個標籤上。

使用狀況

標籤元件可讓內容作者在多個標籤中組織頁面內容。

edit dialog可讓內容作者定義多個標籤並設定作用中的標籤。 使用設計對話框,模板作者可以定義哪些元件可以添加到頁籤並自定義樣式。

秘訣

支援巢狀標籤元件(標籤內的標籤)。

使用內容樹可以定位/選擇簡單(非巢狀)標籤元件,但嵌套標籤不可以。

面板的深層連結

標籤和Accordion元件支援直接連結至元件內的面板。

要執行此操作:

  1. 使用頁面編輯器中的​「檢視為已發佈」選項,檢視包含元件的頁面。
  2. Inspect網頁內容,並識別面板的ID。
    • 例如id="accordion-86196c94d3-item-ca319dbb0b"
  3. 此ID會成為您可使用雜湊(#)附加至URL的錨點。
    • 例如https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

瀏覽至以面板ID為錨點的URL時,瀏覽器會直接捲動至特定元件並顯示指定的面板。 如果面板配置為預設不展開,則會自動展開。

版本和相容性

目前的標籤元件版本為v1,此版本於2018年10月隨核心元件2.2.0版推出,並在本檔案中加以說明。

下表詳細說明所有支援的元件版本、元AEM件版本相容的版本,以及舊版檔案的連結。

元件版本 AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 相容 相容 相容

有關核心元件版本和版本的詳細資訊,請參閱文檔核心元件版本

元件輸出示例

若要體驗標籤元件,並檢視其設定選項的範例以及HTML和JSON輸出,請造訪元件庫

技術詳細資訊

有關Tabs Component 的最新技術文檔可在GitHub上找到。

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

編輯對話框

編輯對話方塊可讓內容作者建立、重新命名和重新排列標籤,並定義作用中的標籤。

項目標籤

頁籤元件的編輯對話框項頁籤

使用​Add​按鈕來開啟元件選擇器,以選擇要新增為標籤的元件。 新增後,會將一個項目新增至清單,其中包含下列欄:

  • 表徵圖 -頁籤的元件類型表徵圖,以便在清單中輕鬆標識。將滑鼠移至上方,以檢視完整元件名稱做為工具提示。
  • 說明 -用作標籤文本的說明,預設為為標籤選擇的元件的名稱。
  • Delete —— 點選或按一下,從Tab元件中刪除Tab。
  • 重新排列 -點選或按一下並拖曳以重新排列標籤的順序。
秘訣

如果頁面的視區被縮小,使編輯對話框變為全屏,則​添加​按鈕將隱藏。 您仍可從元件瀏覽器拖曳至頁面編輯器🔗中的標籤元件,將元件新增至標籤元件。

屬性頁籤

頁籤元件的編輯對話框屬性頁籤

  • 作用中項目 -內容作者可以定義載入頁面時作用中的標籤。
    • 使用​Default​選項,將選擇第一個頁籤。
  • ID —— 此選項可控制HTML和資料層中元件的唯一 識別碼
    • 如果保留空白,則會自動為您產生唯一ID,並透過檢查產生的頁面找到。
    • 如果指定ID,則作者有責任確保其唯一性。
    • 變更ID可能會影響CSS、JS和資料圖層追蹤。

輔助功能頁籤

頁籤元件的編輯對話框輔助功能頁籤

在​Accessibility​標籤上,可為元件的ARIA accessibility標籤設定值。

  • Label —— 元件的ARIA label屬性的值

選擇面板

內容作者可使用元件工具列上的「選取面板」(Select Panel)​選項,變更為不同的面板進行編輯,並輕鬆重新排列標籤順序。

選取面板圖示

在元件工具欄中選擇​選擇面板​選項後,將顯示已配置的頁籤作為下拉式頁籤。

  • 清單按指定的制表符排列,並反映在編號中。
  • 頁籤的元件類型將首先顯示,然後以更亮的字型顯示頁籤的說明。

選取面板快顯視窗

  • 點選或按一下下拉式清單中的項目,將編輯器中的檢視切換至該標籤。
  • 通過使用拖曳控制點,可以就地重新排列這些標籤。
注意

作者在​Edit​模式下無法選取標籤。 使用​**預覽​模式或​檢視為發佈**​選項,與標籤互動,以做為發佈內容的讀者。

設計對話框

設計對話方塊可讓範本作者定義哪些元件可新增為標籤元件的項目,以及定義哪些自訂樣式可供內容作者使用。

允許的元件頁籤

允許的元件​標籤用於定義內容作者可以將哪些元件新增為標籤元件的項目。

在範本編輯器中定義版面容器的原則和屬性時,「允許的元件」標籤的運作方式與相同名稱的標籤相同。

樣式標籤

頁籤元件支AEM持樣式系統

Adobe客戶端資料層

標籤元件支援Adobe客戶端資料層。

本頁內容