可展開式小工具使用自訂元素 <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>
自訂元素預設為開啟。
預設為展開
如果您有許多可展開的項目 (例如版本說明),但希望保持最新的項目處於開啟狀態,預設開啟就很實用。