Card 卡片

卡片用來群組相關內容，可選封面、標題、頁尾與操作區。

示範

基礎

使用 title 顯示簡單標題，或在 header slot 放入自訂內容。

內容放在預設 slot。

<gk-card title="基礎卡片">
  內容放在預設 slot。
</gk-card>

封面

以 cover 屬性指定圖片 URL，或使用 cover slot（有 slot 時優先）。封面圖使用 object-fit: cover 並有最大高度限制。

透過 cover 屬性設定封面圖。 使用 cover slot（優先於 cover 屬性）。

<gk-card cover="/gk-ui/owl.png" title="封面 URL">
  透過 cover 屬性設定封面圖。
</gk-card>
<gk-card title="封面 slot">
  <img slot="cover" src="/gk-ui/owl.png" alt="貓頭鷹" style="width:100%;max-height:180px;object-fit:cover;display:block" />
  使用 cover slot（優先於 cover 屬性）。
</gk-card>

尺寸

密度可為 sm、md（預設）與 lg。

較緊湊的內距與標題。預設尺寸。較寬鬆的內距與標題。

<gk-card size="sm" title="小">較緊湊的內距與標題。</gk-card>
<gk-card size="md" title="中">預設尺寸。</gk-card>
<gk-card size="lg" title="大">較寬鬆的內距與標題。</gk-card>

可懸停

啟用 hoverable 後，懸停會有柔和陰影與輕微位移。

懸停時會有輕微浮起效果。

<gk-card title="可懸停" hoverable>
  懸停時會有輕微浮起效果。
</gk-card>

分段

segmented 會在標題、內容與頁尾（存在時）之間加上分隔線。

標題、內容與頁尾之間會有分隔線。

頁尾區域

<gk-card title="分段" segmented>
  標題、內容與頁尾之間會有分隔線。
  <div slot="footer">頁尾區域</div>
</gk-card>

可關閉

closable 會發出可冒泡的 gk-close；卡片不會自行隱藏。此處由宿主隱藏卡片並顯示可關閉的 gk-alert。

關閉此卡片會顯示警示。

<!-- 宿主：
const cardVisible = ref(true);
const alertVisible = ref(false);
function onCardClose() {
  cardVisible.value = false;
  alertVisible.value = true;
}
function onAlertClose() {
  alertVisible.value = false;
}
-->
<gk-card v-if="cardVisible" title="可關閉" closable @gk-close="onCardClose">
  關閉此卡片會顯示警示。
</gk-card>
<gk-alert
  v-if="alertVisible"
  type="success"
  title="卡片已關閉"
  closable
  @gk-close="onAlertClose"
>
  卡片發出 gk-close；宿主隱藏卡片並顯示此警示。
</gk-alert>

API

Card Props

Prop	型別	預設值
title	string	—
size	'sm' | 'md' | 'lg'	'md'
cover	string	—
hoverable	boolean	false
bordered	boolean	true
segmented	boolean	false
closable	boolean	false

Card Slots

名稱	說明
cover	自訂封面（優先於 cover 屬性）
header	自訂標題列（優先於 title 屬性）
default	主要內容
footer	頁尾區域
action	右上操作區（與關閉按鈕並存時並排）

Card Events

名稱	說明
gk-close	點擊關閉按鈕時觸發；bubbles；composed: true

CSS Parts

Part	說明
base	外層 article 表面
cover	封面區域
header	標題列
content	主要內容包裝
footer	頁尾區域
action	操作區（slot + 關閉）
close	關閉按鈕