順裕鐵材內容呈現
標題、鍵值資料與成功狀態等通用內容元件。
UIBoxCard內容卡片
包含標題、說明與內容插槽的區塊卡片。
選擇服務
請選擇一項最適合您的服務方案。
子元件或其他內容可以直接放在這裡。
查看使用方式
<UIBoxCard title="選擇服務" description="請選擇一項服務方案">內容</UIBoxCard>UITextItem資料文字列
適合放在 dl 中，可切換水平／垂直排列並加粗內容。
- 設計師
- 林設計師
- 服務方案
- 剪髮造型
- 備註
- 抵達前請先來電
查看使用方式
<UITextItem title="設計師" content="林設計師" content-strong />UITextStatusTag狀態文字標籤
統一顯示狀態文字，可依 status 自動套用顏色，也能用 color 覆寫為 primary、secondary、warning 或 danger。
進行中已完成未啟用進行中進行中進行中
查看使用方式
<UITextStatusTag status="inactive" color="warning" />UITextIconItem圖示文字項目
將圖示與文字統一排列，適合日期、時段、人員等摘要資訊。
2026 年 8 月 12 日11:30・60 分鐘王設計師
查看使用方式
<UITextIconItem :icon="CalendarDays" text="2026 年 8 月 12 日" />UIIconLucide 圖示
只要傳入 Lucide 的圖示名稱即可使用，頁面不需要自行引入圖示元件。
Search
CalendarDays
Download
查看使用方式
<UIIcon name="Search" />
<UIIcon name="CalendarDays" :size="20" />
<UIFormButton icon="Download" text="下載" />UITextStatus成功狀態文字
帶有動態勾選圖示，message 可用換行字元拆分成多行。
操作完成
資料已更新。
變更已成功套用。
查看使用方式
<UITextStatus title="操作完成" message="資料已更新。\n變更已成功套用。" />