ENGINEERING UI CATALOG

選擇器

用於服務、日期與預約時段的選擇元件，範例會即時反映目前值。

UISelectableCard

可選卡片

適合呈現方案或人員；duration 與 price 皆可省略。點擊時觸發 select event。

目前選擇：剪髮造型

查看使用方式

<UISelectableCard title="剪髮造型" description="含洗髮與造型" :selected="true" @select="select" />

UIBookingCalendar

支援最早／最晚日期與 disabledDate 規則，月份切換會觸發 monthChange。

2026 年 8 月

日一二三四五六

查看使用方式

<UIBookingCalendar v-model="selectedDate" :max-date="maxDate" :disabled-date="date => date.getDay() === 0" />

UITimeSlots

以 v-model 綁定時間字串；slots 可標記 disabled，空陣列會自動顯示空狀態。

已選日期：8 月 12 日可預約時段

目前選擇：14:00

查看使用方式

<UITimeSlots v-model="selectedTime" :date="12" :slots="slots" />