返回元件總覽

ENGINEERING UI CATALOG

按鈕

主要操作、單選狀態與可選下拉行為。所有範例都可直接互動。

UIButtonPageBottom

頁面操作按鈕

用於頁面底部的主要與次要操作,內容由預設 slot 提供。

尚未操作

查看使用方式
<UIButtonPageBottom variant="primary">確認預約</UIButtonPageBottom>
UIButtonIconBlock

圖示區塊按鈕

適合總覽或功能入口,可傳入標題、次標題、說明、圖示與前往位置。

查看使用方式
<UIButtonIconBlock title="圖片" subtitle="2 個元件" description="圖片上傳與顯示。" :icon="Images" to="/UI/images" />
UIButtonPageTab

展示頁頁籤

用於 UI 展示頁分類導覽;active 狀態會標示目前頁面並自動捲入可視範圍。

查看使用方式
<UIButtonPageTab title="按鈕" to="/UI/buttons" active />
UIButtonChoice

選項按鈕

提供 default、selected、disabled 三種狀態,使用 select event 更新選擇。

查看使用方式
<UIButtonChoice text="下午" state="selected" @select="selectPeriod" />
UIButtonNavMenu

導覽/下拉按鈕

文字、圖示、點擊函式與下拉設定均可自訂;項目可設定為危險色。

查看使用方式
<UIButtonNavMenu text="王小明" :icon="UserRound" has-dropdown :dropdown="menuConfig" />