Skeleton 骨架屏

骨架屏是內容載入時的安靜占位。掃光是中性灰，不是品牌色。

示範

文字列

rows 決定行數，最後一行約 62% 寬。沒有指定形狀時，預設就是文字列。

<gk-skeleton text rows="4"></gk-skeleton>

頭像與文字

頭像骨塊是 40px 圓，與文字間距 12px。

<gk-skeleton avatar text rows="3"></gk-skeleton>

按鈕、圖片、關閉動畫

按鈕骨塊對齊 Button md（34×96）。animated="false" 是靜態灰塊。預設高光是 55% 白，不是品牌色；若要改掃光，覆寫 --gk-skeleton-highlight。

左：掃光。右：靜態。

<gk-skeleton button></gk-skeleton>
<gk-skeleton button animated="false"></gk-skeleton>
<gk-skeleton image></gk-skeleton>

載入結束

loading="false" 會卸載骨塊並顯示預設插槽。prefers-reduced-motion: reduce 會關掉掃光。

知

好知識 · 課程卡

loading 為 false 時顯示真實內容。

顯示內容

<gk-skeleton :loading="loading" image avatar text rows="2" height="100">
  <article>真實卡片</article>
</gk-skeleton>

重複

repeat 重複整塊占位。每一組文字仍會縮短最後一行。

<gk-skeleton avatar text rows="2" repeat="3"></gk-skeleton>

template 插槽

template 插槽可放自訂骨架，載入中會取代內建骨塊。

載入完成的內容。

<gk-skeleton>
  <div slot="template"><!-- 載入中的自訂骨架 --></div>
  <p>載入完成的內容。</p>
</gk-skeleton>

API

Skeleton 屬性

屬性	型別	預設
loading	boolean	true
animated	boolean	true
repeat	number	1
text	boolean	false（未指定其他形狀時改畫文字列）
rows	number	3
avatar	boolean	false
button	boolean	false
image	boolean	false
round	boolean	false
sharp	boolean	false
width / height	string | number	—

image、avatar、text 可以組成卡片占位。width 與 height 作用在圖片、按鈕或純矩形。height="100" 即 100px。

Skeleton 插槽

名稱	說明
預設	loading 為 false 時的真實內容
template	載入中取代內建骨塊的自訂占位

CSS Parts

Part	說明
root	區塊外層
content	預設插槽容器
avatar / text / line / button / image	各形狀骨塊
bone	每一塊占位

CSS 變數

變數	預設
--gk-skeleton-base	rgba(46, 51, 56, 0.07)
--gk-skeleton-highlight	rgba(255, 255, 255, 0.55)

無障礙

• 載入中宿主為 aria-busy="true"，並有視覺隱藏的「載入中」。
• 骨塊為 aria-hidden="true"。
• 載入結束後清除 busy，並卸載骨塊。