索引標籤元件 tabs-component
核心元件索引標籤元件可讓您將內容組織到多個索引標籤上。
使用情況 usage
索引標籤元件可讓內容作者在多個索引標籤內整理頁面內容。
此 編輯對話方塊 允許內容作者定義多個索引標籤並設定作用中的索引標籤。 使用 設計對話方塊,範本作者可以定義哪些元件可以新增到索引標籤並自訂樣式。
版本和相容性 version-and-compatibility
索引標籤元件的目前版本是v1,此版本隨2018年10月的核心元件發行版本2.2.0的發佈引入,說明見本文。
下表詳細說明元件的所有支援版本、與元件版本相容的AEM版本,以及舊版檔案的連結。
如需核心元件版本的詳細資訊,請參閱檔案 核心元件版本.
範例元件輸出 sample-component-output
若要體驗索引標籤元件並檢視其設定選項範例以及HTML和JSON輸出,請造訪 元件資料庫.
技術細節 technical-details
有關索引標籤元件的最新技術檔案 在GitHub上可找到.
有關開發核心元件的進一步詳細資訊,請參閱 核心元件開發人員檔案.
面板的深層連結 deep-linking
索引標籤、 輪播, 和 摺疊式功能表元件 支援直接連結至元件中的面板。
若要這麼做:
- 使用檢視含元件的頁面 以發佈的形式檢視 選項來編輯頁面。
- Inspect頁面內容並識別面板的ID。
- 例如
id="accordion-86196c94d3-item-ca319dbb0b"
- 例如
- ID會成為您可以使用雜湊附加至URL的錨點(
#
)。- 例如
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
- 例如
導覽至將面板ID當作錨點的URL,瀏覽器會直接捲動至特定元件,並顯示指定的面板。 如果面板預設為不展開,則會自動展開。
標籤和回應式設計 responsive-design
所有核心元件的設計都可充分回應,確保裝置間的順暢體驗。
有些進階元件(如標籤元件)在執行專案的內容中可能需要特別考量,以保持在所有條件下的回應能力。 請參閱檔案 核心元件的回應式設計 以取得詳細資訊。
編輯對話方塊 edit-dialog
內容作者可以使用「編輯」對話方塊來建立、重新命名和重新排列標籤,以及定義作用中的標籤。
專案標籤 items-tab
使用 新增 按鈕來開啟元件選擇器,選擇要新增為索引標籤的元件。 新增專案後,專案會新增到清單中,包含以下欄:
- 圖示 — 標籤的元件型別圖示,可方便在清單中識別。 將滑鼠移到上方以檢視完整的元件名稱作為工具提示。
- 說明 — 用來作為索引標籤文字的說明,預設為針對索引標籤選取的元件名稱。
- 刪除 — 點選或按一下以從標籤元件中刪除標籤。
- 重新排列 — 點選或按一下並拖曳以重新排列標籤。
屬性標籤 properties-tab
-
作用中的專案 — 內容作者可以定義載入頁面時處於作用中狀態的索引標籤。
- 使用 預設 選項,則會選取第一個索引標籤。
-
ID — 此選項可讓您控制HTML中元件的唯一識別碼,以及 資料層.
- 如果保留為空白,系統會自動為您產生唯一ID,並可透過檢查結果頁面找到該ID。
- 若指定ID,作者應負責確認該ID為唯一ID。
- 變更ID會對CSS、JS和資料層追蹤造成影響。
協助工具標籤 accessibility-tab
在 協助工具 標籤,可設定的值 ARIA協助工具 元件的標籤。
- 標籤 — 元件的ARIA標籤屬性值
選取面板 select-panel
內容作者可以使用 選取面板 元件工具列上的選項,以變更為不同的面板進行編輯,以及輕鬆地重新排列索引標籤。
選取 選取面板 選項時,已設定的標籤會以下拉式清單的形式顯示。
- 清單會依指派的標籤排列方式排序,並會反映在編號中。
- 首先顯示標籤的元件型別,然後是較細字型的標籤說明。
- 在下拉式清單中點選或按一下專案,會在編輯器中將檢視切換至該索引標籤。
- 您可以使用拖曳操作框就地重新排列標籤。
設計對話方塊 design-dialog
「設計」對話方塊可讓範本作者定義哪些元件可新增為索引標籤元件的專案,並定義哪些自訂樣式可供內容作者使用。
允許的元件標籤 allowed-components-tab
此 允許的元件 tab可用來定義哪些元件可由內容作者新增為索引標籤元件的專案。
「允許的元件」標籤的功能與相同名稱的標籤相同,當 在範本編輯器中定義配置容器的原則和屬性。
樣式索引標籤 styles-tab
索引標籤元件支援AEM 樣式系統.
Adobe使用者端資料層 data-layer
索引標籤元件支援 Adobe使用者端資料層。