component index

54 個元件

所有元件，一頁瀏覽。

Admin

39

後台介面常用組件

高風險操作確認用的強制對話框；需明確回應後才能關閉。

音訊播放器（vidstack）。播放、快進快退、音量、播放速度、時間顯示。

圓形頭像。縮圖或替代文字。

狀態或數量的小型標籤。尺寸 small／medium／large。

目前頁面在網站階層中的位置。

觸發動作的按鈕。尺寸 medium／small；樣式 filled／outline／ghost。

核取方塊。單選、多選、不定態（indeterminate）。

從呼叫端傳入的色票陣列挑選顏色。

圖片裁切。可拖移 selection、zoom、即時預覽；可搭配 dialog／stepper 做多尺寸裁切。

日期選擇器（@ark-ui/vue）。單日、區間選取。

覆蓋頁面內容的模態對話框。

區隔內容的分隔線。方向：水平（預設）、垂直。

點按 trigger 後彈出的選項列表；含鍵盤導航。

表單欄位容器。統一 label、說明、錯誤訊息排版。

多檔上傳。拖曳、驗證、File 與 URL 並存；上傳由父層監聽 upload 事件處理。

圖片純展示。視覺態：loading／loaded／error。

單張圖片上傳。

文字輸入欄位。可搭配清除、密碼切換、字數限制等子組件。

讀取中指示。全螢幕或區塊 inline。

浮動通知（vue-sonner）。狀態變體與動作按鈕。

數字輸入。含增減控制。

程式化開啟 Dialog、Drawer 等浮層。可動態更新 props；結果以 Promise 回傳。

分頁導覽。頁碼、資訊區、每頁筆數選擇。

內嵌 PDF 檢視器（EmbedPDF）。

進度條。顯示百分比。

互斥單選按鈕組。

可捲動容器。自訂捲動列樣式。

下拉選擇器。單選／多選、選項搜尋、tag 顯示、自訂選項渲染。

後台側邊導覽。展開／收合、分組、巢狀子項目、行動裝置抽屜。

多步驟進度指示器。目前步驟與整體流程狀態。

布林狀態開關。

分頁切換。

分類、狀態或關鍵字的靜態標籤。

多行文字輸入。可搭配字數限制。

依節點狀態呈現進度的時間軸。狀態：pending／current／completed／error；方向：垂直、水平。

懸停時顯示輔助說明。

巢狀資料。展開、收合、選取。

影片播放器（vidstack）。來源：MP4、HLS、YouTube；控制：快進快退、解析度、播放速度、音量、全螢幕。

Vxe Table Headed UI

資料表格（vxe-table）。排序、勾選、分頁。

編輯器

14

tiptap 編輯器與 opt-in 包

Editor Drag Handle

游標停在區塊時左側浮出把手；拖曳排序或選取區塊。

Editor Emoji Menu

輸入 : 觸發浮動選單；挑選並插入 emoji。

Editor Font Size

toolbar 字級控制：−／下拉／+。

Editor Highlight

toolbar 文字底色按鈕與色板；標示選取文字。

Editor Link Bubble

游標位於連結時浮出泡泡；檢視、編輯、移除。

Editor List Trash

游標位於清單項時，旁側浮出刪除鈕。

Editor Mention Menu

輸入 @ 觸發浮動選單；挑選並插入提及對象。

Editor Suggestion Menu

輸入 / 觸發浮動選單；挑選指令執行對應動作。

插入表格；Notion 式欄／列 grip 選取與操作。

Editor TextAlign

toolbar 對齊按鈕；標題／段落左中右。

Editor Text Color

toolbar 文字顏色按鈕與色板；套用至選取文字。

基於 @tiptap/vue-3 的空白編輯器核心；無 extension、無 toolbar。

admin-editor 加上 StarterKit；粗體、標題、清單等基本格式。

admin-rich-editor 的工具列。layout：fixed／bubble／floating；可放按鈕、下拉選單與自訂元件。

AIO 編輯器

1

config 驅動的 all-in-one 編輯器

config 驅動的 all-in-one 富文本編輯器，傳入設定即得完整編輯器，無需組裝子元件。