ENGINEERING UI CATALOG
內容呈現
標題、鍵值資料與成功狀態等通用內容元件。
UIBoxCard內容卡片
包含標題、說明與內容插槽的區塊卡片。
選擇服務
請選擇一項最適合您的服務方案。
子元件或其他內容可以直接放在這裡。
查看使用方式
<UIBoxCard title="選擇服務" description="請選擇一項服務方案">內容</UIBoxCard>UITextItem資料文字列
適合放在 dl 中，可切換水平／垂直排列並加粗內容。
- 設計師
- 林設計師
- 服務方案
- 剪髮造型
- 備註
- 抵達前請先來電
查看使用方式
<UITextItem title="設計師" content="林設計師" content-strong />UITextStatusTag狀態文字標籤
統一顯示已確認、已完成與已取消狀態，可切換 sm／md 尺寸。
已確認已完成已取消已確認
查看使用方式
<UITextStatusTag status="confirmed" />UITextIconItem圖示文字項目
將圖示與文字統一排列，適合日期、時段、人員等摘要資訊。
2026 年 8 月 12 日11:30・60 分鐘王設計師
查看使用方式
<UITextIconItem :icon="CalendarDays" text="2026 年 8 月 12 日" />UITextStatus成功狀態文字
帶有動態勾選圖示，message 可用換行字元拆分成多行。
預約完成
我們已收到您的預約。
通知信已寄出。
查看使用方式
<UITextStatus title="預約完成" message="我們已收到您的預約。\n通知信已寄出。" />