可展開式

可展開式小工具使用自訂元素 <devsite-expandable> 使用者在可展開部分中隱藏或顯示部分內容。在 Markdown 中 檔案,請使用標準 HTML 元素包住自訂元素,例如 <section><div>

切換區段

以下範例會包裝在 <devsite-expandable> 自訂元素中,該元素預設為隱藏位置。其標題包含名稱為 class 屬性 showalways

一律顯示這個標題

這個段落預設為隱藏位置。

This code block within the custom element also defaults to a hidden
    position.

自訂控制項

以下範例會將 expand-control 類別新增至button 展開及收合區段的 <devsite-expandable> 自訂元素 沒有切換鈕

多種選擇

展開一次

以下範例會將 expand-control once 類別新增至 <devsite-expandable> 自訂元素中的連結,該連結會在點選時顯示額外內容,然後從頁面中消失。

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

更多...

Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

連結時自動展開

以下範例會將 #sample1 ID 新增至 <devsite-expandable> 自訂元素會在網頁載入時自動展開區段 我們都會分享圖片。

如何在連結時自動展開

關閉這個可展開部分,然後點選上方的 [#sample1] 連結。 然後重新載入頁面,即可自動展開這個可展開的部分。

Code block within the 'Auto-expand on linking' demo.

預設開啟

以下範例會將 expanded 屬性新增至 將 <devsite-expandable> 自訂元素預設為開啟。

預設為展開

如果您有許多可展開的項目 (例如版本說明),但希望保持最新的項目處於開啟狀態,預設開啟就很實用。