Accordion Component

核心元件Accordion元件允許建立在頁面上以accordion排列的面板集合。

使用狀況

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

面板的深層連結

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

要執行此操作:

  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時,瀏覽器會直接捲動至特定元件並顯示指定的面板。 如果面板配置為預設不展開,則會自動展開。

版本和相容性

Accordion元件的目前版本為v1,此版本於2019年6月隨核心元件2.5.0版推出,並在本檔案中加以說明。

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

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

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

元件輸出示例

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

技術詳細資訊

有關Accordion元件的最新技術文檔可在GitHub上找到。

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

配置對話框

設定對話方塊可讓內容作者定義accordion項目、其面板,以及該項目的行為和顯示方式,讓頁面的訪客檢視。

項目標籤

Accordion元件的編輯對話框的「項」頁籤

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

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

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

屬性頁籤

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

  • 單一項目擴展 -選擇此選項後,將強制一次擴展單個accordion項目。展開一個項目將會收合所有其他項目。
  • 展開的項目 -此選項定義在載入頁面時依預設展開的項目。
    • 選擇​單項擴展​時,必須選擇一個面板。 依預設會選取第一個面板。
    • 如果未選擇​單個項目擴展,此選項是多選項,是可選的。
  • ID —— 此選項可控制HTML和資料層中元件的唯一 識別碼
    • 如果保留空白,則會自動為您產生唯一ID,並透過檢查產生的頁面找到。
    • 如果指定ID,則作者有責任確保其唯一性。
    • 變更ID可能會影響CSS、JS和資料圖層追蹤。

選擇「面板」 「沿面」

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

選取面板圖示

在元件工具列中選取「選取面板」(Select Panel)​選項後,所設定的accordion面板會顯示為下拉式清單。

選取面板快顯視窗

  • 該清單按所指定的面板排列排序,並反映在編號中。
  • 首先顯示面板的元件類型,然後以更亮的字型說明面板。
  • 點選或按一下下拉式清單中的項目,將編輯器中的檢視切換至該面板。
  • 通過使用拖曳控點,可以就地重新排列面板。

設計對話框

設計對話框允許模板作者定義內容作者可用的選項,內容作者使用Accordion元件,並在放置Accordion元件時設定預設值。

屬性頁籤

「設計」對話框屬性頁籤

  • 允許的標題元素 -此多選下拉式清單定義作者允許選取的accordion項目標題HTML元素。
  • 預設標題元素 -此下拉式清單定義預設的accordion項目標題HTML元素。

允許的元件頁籤

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

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

樣式標籤

Accordion元件支AEM持Style System

Adobe客戶端資料層

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

本頁內容

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