DA2× Web Dev Glossary
第 3 類
呈現元件
展示展示資料與內容的視覺元件
推廣連結
上次更新 2 小時前
此連結已累積 1,234 次點擊，轉換率 3.2%。
卡片
Card
帶圓角陰影的容器，由 header / body / footer 三區組成
1,234
今日點擊
+12.3%
487
不重複訪客
+5.8%
KPI 卡片
KPI Card
單一指標的大數字展示，通常含趨勢箭頭與環比數據
| 短碼 | 點擊 | 狀態 |
|---|---|---|
abc123 | 1,234 | 活躍 |
xk9mz | 892 | 活躍 |
p4qr7 | 3 | 已過期 |
表格
Table
結構化資料的標準呈現，含表頭、排序、狀態徽章
王
王小明
1,234 次點擊
Admin
李
李大華
892 次點擊
User
張
張三豐
543 次點擊
User
清單
List
垂直排列的項目群組，通常含頭像、標題與輔助資訊
成功錯誤資訊警告預設BetaNew
徽章
Badge
小型狀態或分類標示，通常有成功/錯誤/警告/資訊四種語意
前端開發 ×React ×Node.js ×Vue 3 × 新增標籤
標籤 Chip
Chip
可顯示、可個別刪除的標籤元件，常用於多選輸入
丹
王
李
張
陳
+8
13 位成員參與此專案
頭像
Avatar
使用者或項目的圓形圖示，可堆疊顯示群組
10:30 · 今天
短網址建立成功
由 admin 建立，短碼 abc123
11:05 · 今天
首次點擊
來源：Facebook · IP 125.x.x.x
14:22 · 今天
達到 1,000 次里程碑
發送通知給 admin
時間軸
Timeline
按時間順序排列事件，通常用於操作歷史、活動記錄
基本設定
已設定：短碼、目標網址、到期時間。點擊可修改各項參數。
進階設定
折疊手風琴
Accordion
可展開 / 收合的內容區塊，減少視覺複雜度
建立新連結
目標網址
https://example.com
模態框
Modal
覆蓋頁面的對話窗，用於表單輸入或確認操作，背景有遮罩
一二三四五六日
圖表
Chart
長條圖、折線圖、圓餅圖等，資料視覺化的核心元件
本月目標達成78%
轉換率45%
活躍連結比例32%
進度條
Progress Bar
視覺化百分比數值，可有多個不同顏色表達不同指標
骨架屏
Skeleton
資料載入中的佔位動畫，改善感知效能，避免佈局跳動
這是連結的完整目標網址
🔗 abc123.sh（懸停此處）
工具提示
Tooltip
Hover 時顯示的單行說明，提供額外資訊而不佔用空間
連結統計
今日點擊：234
本週：1,892
總計：12,441
本週：1,892
總計：12,441
彈出框
Popover
點擊後顯示的富內容浮層，比 Tooltip 可包含更多資訊