折疊式面板元件

核心元件折疊式功能表元件可建立以頁面上折疊式功能表排列的面板集合。

使用狀況

核心元件折疊式功能表元件允許建立元件集合，這些元件以面板形式組成，並排列在頁面上的折疊式功能表中，類似於標籤元件，但允許展開和折疊面板。

• 可在configure dialog中定義折疊式功能表的屬性。
• 可在「設定」對話方塊以及選取面板彈出視窗中定義折疊式面板的順序。
• 將折疊式面板元件新增至頁面時的預設值，可在設計對話方塊中定義。

面板的深層連結

折疊式功能表和標籤元件支援直接連結至元件內的面板。

要執行此操作：

1. 使用頁面編輯器中的​View as Published​選項，檢視包含元件的頁面。
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，已於2019年6月隨核心元件2.5.0版推出，本檔案將加以說明。

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

如需核心元件版本和版本的詳細資訊，請參閱檔案核心元件版本。

範例元件輸出

若要體驗折疊式功能表元件，並查看其設定選項以及HTML和JSON輸出的範例，請造訪元件程式庫。

技術詳細資訊

如需折疊式功能表元件的最新技術檔案，請參閱GitHub。

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

配置對話框

「設定」對話方塊可讓內容作者定義折疊式功能表項目、其面板，以及該項目的行為和顯示方式，供造訪頁面的訪客使用。

項目標籤

使用​Add​按鈕開啟元件選擇器，以選擇要添加為面板的元件。 新增後，會將項目新增至清單，其中包含下列欄：

• 圖示 — 面板元件類型的圖示，以便在清單中輕鬆識別。將滑鼠移至以顯示完整的元件名稱，作為工具提示。
• 說明 — 用作面板文字的說明，預設為為面板選取的元件名稱。
• 刪除 — 點選或按一下，從折疊式功能表元件中刪除面板。
• 重新排列 — 點選或按一下並拖曳以重新排列面板的順序。

屬性標籤

• 單一項目展開 — 選取此選項時，會強制一次展開單一折疊式功能表項目。展開一個項目就會折疊所有其他項目。
• 展開的項目 — 此選項會定義載入頁面時依預設展開的項目。
  • 選擇​單項擴展​時，必須選擇一個面板。 依預設，會選取第一個面板。
  • 未選擇​單項擴展​時，此選項為多選項，是可選項。
• ID — 此選項可控制HTML和資料層中元件的唯一 識別碼。
  • 若保留為空白，系統會自動為您產生唯一ID，並且可透過檢查產生的頁面來找到。
  • 若已指定ID，則作者應負責確認其唯一。
  • 變更ID可能會影響CSS、JS和資料層追蹤。

選擇面板彈出窗口

內容作者可使用元件工具列上的​選取面板​選項，變更為不同面板進行編輯，並輕鬆重新排列折疊式功能表內面板的順序。

在元件工具列中選取​選取面板​選項後，已設定的折疊式面板會顯示為下拉式清單。

• 該清單按所分配的面板排列排列，並反映在編號中。
• 面板的元件類型首先顯示，然後以較淺的字型顯示面板的說明。
• 點選或按一下下拉式清單中的項目，將編輯器中的檢視切換至該面板。
• 通過拖動控點可以就地重新排列面板。

設計對話方塊

設計對話方塊可讓範本作者定義內容作者可使用折疊式功能表元件的選項，以及放置折疊式功能表元件時設定的預設值。

屬性標籤

• 允許的標題元素 — 此多選下拉式清單會定義作者允許選取的折疊式功能表項目標題HTML元素。
• 預設標題元素 — 此下拉式清單定義預設折疊式功能表項目標題HTML元素。

「允許的元件」頁簽

允許的元件​標籤用來定義哪些元件可由內容作者新增為折疊式功能表元件中的面板的項目。

在模板編輯器中定義佈局容器的策略和屬性時，「允許的元件」頁簽的功能與同名頁簽的功能相同。

樣式標籤

折疊式面板元件支援AEM 樣式系統。

Adobe用戶端資料層

折疊式功能表元件支援Adobe客戶端資料層。