Alert 警示

警示用於行內回饋，支援語意類型、可選邊框、內建圖示，以及與 Card 相同的關閉行為（只發出 gk-close）。

示範

基礎

類型：default、info、success、warning、error。各類型會套用對應色彩與內建圖示。

中性的行內回饋。提供使用者補充說明。操作已完成。需要注意的事項。發生錯誤。

<gk-alert type="default" title="預設">中性的行內回饋。</gk-alert>
<gk-alert type="info" title="資訊">提供使用者補充說明。</gk-alert>
<gk-alert type="success" title="成功">操作已完成。</gk-alert>
<gk-alert type="warning" title="警告">需要注意的事項。</gk-alert>
<gk-alert type="error" title="錯誤">發生錯誤。</gk-alert>

有邊框

加上 bordered 會在柔和底色外再顯示邊框（預設只有底色）。

柔和底色再加上邊框。

<gk-alert bordered type="info" title="有邊框">
  柔和底色再加上邊框。
</gk-alert>

可關閉

closable 會顯示關閉按鈕並發出可冒泡的 gk-close。警示不會自行隱藏，需由宿主處理事件。

關閉會發出 gk-close；請由宿主隱藏或移除警示。

<!-- 宿主：const alertVisible = ref(true); function onAlertClose() { alertVisible.value = false } -->
<gk-alert
  v-if="alertVisible"
  type="success"
  title="可關閉"
  closable
  @gk-close="onAlertClose"
>
  關閉會發出 gk-close；請由宿主隱藏或移除警示。
</gk-alert>

圖示

在 icon slot 放入內容即可覆寫內建類型圖示。

icon slot 會覆寫內建類型圖示。

<gk-alert type="info" title="自訂圖示">
  <svg slot="icon" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 2 2 7l10 5 10-5-10-5Zm0 9.2L4.2 7.4 12 3.5l7.8 3.9L12 11.2Zm0 2.1 8-4v7.2c0 1.1-3.6 2.5-8 2.5s-8-1.4-8-2.5V9.3l8 4Z"/>
  </svg>
  icon slot 會覆寫內建類型圖示。
</gk-alert>

無圖示

綁定 :show-icon="false" 可隱藏圖示欄。

show-icon 為 false 時隱藏圖示欄。

<gk-alert type="warning" title="無圖示" :show-icon="false">
  show-icon 為 false 時隱藏圖示欄。
</gk-alert>

API

Alert Props

Prop	型別	預設值
type	'default' | 'info' | 'success' | 'warning' | 'error'	'default'
title	string	—
bordered	boolean	false
closable	boolean	false
show-icon	boolean	true

Alert Slots

名稱	說明
default	主要內容
icon	有內容時覆寫內建類型圖示

Alert Events

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

CSS Parts

Part	說明
base	外層表面
icon	圖示欄
body	標題與內容包裝
title	標題列
content	預設 slot 包裝
close	關閉按鈕