Empty 空狀態

空狀態是列表、表格、搜尋結果與初次使用面板的安靜占位。它不是警示。

示範

基礎

沒有 description 時，依 document.documentElement.lang：中文為「暫無資料」，英文為 “No data”。插畫是裝飾。

<gk-empty></gk-empty>

自訂說明

可傳 description，或用 description 插槽覆寫文字。

沒有符合的課程，試試更短的關鍵字。

<gk-empty description="沒有符合的課程"></gk-empty>

標題與動作

title 是較強的一行。action 與 extra 都在同一個動作列，通常放 md 34 的品牌主按鈕，可再加 ghost。

新增課程了解更多

<gk-empty
  title="還沒有課程"
  description="建立第一門課，開始累積你的好知識內容。"
  size="large"
>
  <gk-button slot="action">新增課程</gk-button>
  <gk-button slot="extra" variant="ghost">了解更多</gk-button>
</gk-empty>

較大

size="large" 加大留白（約 44px）與插畫（128×96，預設為 96×72）。

<gk-empty size="large" title="這裡是空的" description="large 會加大留白與插畫。"></gk-empty>

自訂插畫

image 插槽（別名 icon）會取代內建線稿。:show-icon="false" 在沒有替代圖時隱藏預設插畫。

<gk-empty description="自訂插畫">
  <svg slot="image" viewBox="0 0 128 96" aria-hidden="true"><!-- 你的插畫 --></svg>
</gk-empty>

表格中

把 Empty 放進表格內容區。元件維持置中直欄，不會把動作按鈕拉成全寬。

名稱狀態更新

清除篩選

<gk-empty description="搜尋無結果，試試其他關鍵字">
  <gk-button slot="action">清除篩選</gk-button>
</gk-empty>

API

Empty 屬性

屬性	型別	預設
description	string	依文件語言：「暫無資料」/ “No data”
title	string	''
size	'default' | 'large'	'default'
show-icon	boolean	true

若頁面語言與 documentElement.lang 不同，請自行傳 description。show-icon="false" 會隱藏內建插畫。

Empty 插槽

名稱	說明
image / icon	自訂插畫，取代內建 SVG
title	取代 title 屬性
description	取代說明文字
extra / action	動作，通常是 gk-button
預設	說明下方的額外內容

CSS Parts

Part	說明
root	置中直欄
image	插畫，aria-hidden="true"
title	標題
description	說明
extra	動作列

沒有 role="alert"。空狀態是占位，不是錯誤。

無障礙

• 插畫為 aria-hidden。不要只靠圖，請保留說明文字。
• 標題與說明是一般文字。
• 動作按鈕自帶名稱與焦點環。Empty 不會加上 alert 角色。