ENGINEERING UI CATALOG

回饋狀態

用於阻斷式訊息、空資料、讀取中與內容骨架的視覺回饋。

UIAlert

Alert

支援純文字、可信任 HTML、五種動畫圖示、確認／取消操作與定時自動關閉。

查看使用方式

<UIAlert v-model="isOpen" title="操作完成" text="資料已儲存" icon="success" :timer="2500" />

UIAlert

捕捉執行階段錯誤，將 Error.message 交給 Alert 顯示。

範例會模擬 API 缺少 data，並顯示捕捉到的錯誤訊息。

查看使用方式

try { await request() } catch (error) { alert.text = error instanceof Error ? error.message : '未知錯誤' }

UIEmptyState

內建 service 與 time 兩種情境，也能覆寫標題和說明。

目前沒有可預約的服務方案

請稍後再回來查看最新服務。

目前沒有可預約時段

請改選其他日期，或稍後再試。

查看使用方式

<UIEmptyState variant="time" />

UISkeleton

提供 text、card、circle 三種 variant，width 與 height 可自行設定。

查看使用方式

<UISkeleton variant="text" width="70%" />

UIPageLoading

固定於視窗上的非阻斷式提示，由 visible prop 控制。示範會在 1.4 秒後自動關閉。

查看使用方式

<UIPageLoading :visible="isLoading" />