頁面區塊 Sections
社群貼文牆
以通用社群貼文樣式呈現的評價動態牆，新貼文會定時從頂端滑入、按讚數輕跳，兩欄瀑布排列。
把客戶評價做成一面「正在更新」的社群動態牆。每則評價是一張通用樣式的貼文卡：頭像縮寫、顯示名稱、虛構帳號、相對時間與可選的認證徽章，內文裡的 #標籤 與 @提及 以強調色顯示，底部是回覆、轉貼、喜歡的互動列。開啟 live 時，先顯示前幾則，其餘每隔一段時間從頂端滑入，其他卡片以彈簧下推，超過上限時最舊的一則從底部淡出；喜歡數也會不定時 +1 並輕跳一下。使用者往下捲動閱讀時，新貼文改為累積成「有 N 則新評價」提示，點擊才插入，內容不會在眼前跳動。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add social-post-reviewsPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4000
編輯中的呼叫預設屬性
<SocialPostReviews/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/social-post-reviews.json或在 components.json 設定 registries 後，改用 @webberui/social-post-reviews 安裝。
使用
import { SocialPostReviews } from "@/components/ui/social-post-reviews";
<SocialPostReviews
eyebrow="社群回饋"
title="大家正在說"
initialCount={6}
maxVisible={8}
testimonials={[
{
quote: "導入三週，門市備料浪費少了一大截 #門市日常",
name: "林語晴",
handle: "yuching.ops",
role: "營運主管",
company: "青嶼咖啡",
postedAt: "2026-10-25T05:10:00Z",
likes: 128,
replies: 12,
reposts: 9,
verified: true,
},
{
quote: "排班表終於不用每週手動調三輪，謝謝 @beichen.dispatch 幫忙測試！",
name: "王思妤",
handle: "szuyu_w",
company: "北辰物流",
postedAt: "2026-10-25T03:40:00Z",
likes: 86,
replies: 7,
reposts: 4,
media: true,
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
testimonials | SocialPostReviewsItem[] | — | 評價資料；前 initialCount 則依陣列順序由上而下先顯示，其餘依序排入佇列 |
eyebrow | string | "社群回饋" | 標題上方的小標 |
title | string | "大家正在說" | 區塊標題；同時作為 section 與動態牆的無障礙名稱 |
subtitle | string | — | 標題下方的說明文字 |
now | string | 最新一則的 postedAt | 相對時間的基準（ISO 8601）；不讀目前時間，伺服器與瀏覽器輸出一致 |
live | boolean | true | 是否定時插入新貼文並顯示暫停鈕 |
interval | number | 4000 | 插入間隔（毫秒）；未提供時讀 --wb-social-post-reviews-interval |
initialCount | number | 6 | 初始顯示則數 |
maxVisible | number | 8 | 同時顯示上限；超過時最舊的一則從底部淡出 |
columns | 1 | 2 | 2 | 欄數；容器窄於 640px 時一律 1 欄 |
loop | boolean | true | 佇列播完後，把已淡出的貼文重新排入 |
showMedia | boolean | true | 是否顯示 media 貼文的附圖佔位 |
paused | boolean | — | 受控的暫停狀態；未提供時由元件內部管理 |
defaultPaused | boolean | false | 非受控模式的初始暫停狀態（減少動態效果時一律先暫停） |
onPausedChange | (paused: boolean) => void | — | 使用者按下暫停／繼續時回呼 |
className | string | — | 附加到根 section |
SocialPostReviewsItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
quote | string | — | 評價內文；#標籤（含全形 ＃ 與中文）與 @提及 以強調色顯示 |
name | string | — | 顯示名稱；頭像縮寫取中文末兩字或拉丁字首 |
handle | string | — | 虛構帳號，@ 可省略 |
postedAt | string | — | 發文時間（ISO 8601） |
likes | number | — | 喜歡數 |
replies | number | — | 回覆數 |
reposts | number | — | 轉貼數 |
role | string | — | 職稱 |
company | string | — | 公司或單位，與職稱以「·」連接 |
tags | string[] | — | 附加在內文後的標籤（不含 #） |
media | boolean | false | 顯示附圖佔位（依頭像色相產生的漸層方塊） |
verified | boolean | false | 顯示通用認證徽章 |
highlight | string | — | quote 中要以強調底色標記的片段 |
metric | { value: string; label: string } | — | 貼文底部的成效數字 |
avatarHue | number | — | 頭像漸層色相；未提供時依索引以黃金角度分配 |
rating | number | — | 保留欄位，方便與其他評價元件共用資料；此元件不顯示星等 |
細節
- 相對時間（「剛剛」「3 小時前」「2 天前」）只用
postedAt與now計算，不在 render 讀目前時間；超過 30 天改顯示 UTC 日期。 - 兩欄排列時，每則新貼文放進目前估計高度較矮的那一欄，插入後不再換欄，所以卡片只會往下推、不會左右跳。
- 喜歡數的自動 +1 由決定性的雜湊序列決定時機與對象，不使用亂數；點愛心切換已讚是本地狀態，數字以垂直滾動切換、圖示放大到 1.25 倍再回彈。
- 動態牆頂端放了一個哨兵元素：它捲出視窗上緣時，新貼文改為累積到「有 N 則新評價」提示列（sticky），點擊後一次插入並捲回頂端。
- 節奏與顏色可用 CSS 變數覆寫：
--wb-social-post-reviews-interval（插入間隔，預設 4000ms，掛載時讀取一次）、--wb-social-post-reviews-accent（強調色，預設亮色#0d9488、暗色#2dd4bf，影響標籤、提及、徽章、新卡細條與提示列）。下推動畫是 stiffness 300、damping 30 的彈簧。 - 滑鼠移入、焦點在動態牆內、分頁切到背景、區塊離開視口時都會自動暫停。
可及性
- 根元素是
<section aria-labelledby>，指向標題h2；貼文清單是role="feed"，每則article帶aria-posinset／aria-setsize，可用 Tab 逐則聚焦 - 每則評價以
figure／blockquote／figcaption呈現；頭像與附圖佔位對輔助科技隱藏，認證徽章有「已認證」的隱藏文字，回覆與轉貼數附完整說明 - 新貼文插入時由
aria-live="polite"區域朗讀「新評價：姓名」，5 秒內最多一次，避免朗讀洗版 - 提供可見的「暫停自動更新」按鈕（WCAG 2.2.2），hover、focus-within 與分頁隱藏時也會暫停；愛心是帶
aria-pressed的按鈕 - 使用者系統開啟「減少動態效果」時，自動更新預設暫停（仍可按「繼續自動更新」），新貼文改為 150ms 直接淡入，不滑動、不彈簧下推，數字與愛心也不滾動、不輕跳