收件匣分割視圖
列表+閱讀窗格的郵件收件匣，選取滑動高亮、未讀徽章。
經典的郵件收件匣分割視圖：左側信件列表帶寄件人縮寫頭像、未讀圓點與標星指示，選中高亮條以 layoutId 在項目間流暢滑動；右側閱讀窗格以 AnimatePresence 切換信件內容，工具列支援標星與封存（封存後自動選取相鄰信件）。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
360
<InboxSplitView />
安裝
npx shadcn@latest add https://webberui.com/r/inbox-split-view.json或在 components.json 設定 registries 後，改用 @webberui/inbox-split-view 安裝。
安裝依賴後，從 registry JSON（/r/inbox-split-view.json 的 files[0].content）複製 inbox-split-view.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { InboxSplitView, type InboxEmail } from "@/components/ui/inbox-split-view";
const emails: InboxEmail[] = [
{
id: "1",
sender: "林佳蓉",
subject: "Q3 產品路線圖初稿請過目",
preview: "嗨，附上這季路線圖的初稿…",
time: "上午 9:24",
unread: true,
body: ["嗨，附上這一季產品路線圖的初稿，麻煩你先看過一輪。"],
},
];
<InboxSplitView
emails={emails}
onArchive={(email) => console.log("封存", email.id)}
onToggleStar={(email, starred) => console.log(email.id, starred)}
/>Props
InboxSplitView
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
emails | InboxEmail[] | — | 初始信件資料，元件內部管理已讀 / 標星 / 封存狀態 |
defaultSelectedId | string | 第一封的 id | 預設選中的信件 id |
title | string | "收件匣" | 收件匣標題文字 |
height | number | 420 | 面板高度（px），列表與內文各自內部捲動 |
onArchive | (email: InboxEmail) => void | — | 封存信件時觸發 |
onToggleStar | (email: InboxEmail, starred: boolean) => void | — | 切換標星時觸發，starred 為切換後的狀態 |
className | string | — | 透傳到外層容器 |
InboxEmail
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | — | 唯一識別碼 |
sender | string | — | 寄件人名稱，頭像取第一個字元 |
subject | string | — | 信件主旨 |
preview | string | — | 列表中的預覽摘要（單行截斷） |
time | string | — | 顯示用時間字串，例如「上午 9:24」 |
body | string[] | — | 閱讀窗格的內文段落 |
unread | boolean | false | 是否未讀（選取後自動標為已讀） |
starred | boolean | false | 是否已標星 |
可及性
- 信件列表使用
role="listbox"與role="option"，選中項標記aria-selected，並支援上下方向鍵切換信件 - 標星按鈕以
aria-pressed表達切換狀態，標星與封存按鈕皆有中文aria-label - 未讀圓點附
aria-label="未讀"，未讀信件同時以粗體字重區分，不只依賴顏色 - 使用者系統開啟「減少動態效果」時，高亮條滑動、列表重排與窗格切換動畫皆改為即時切換
- 寄件人縮寫頭像為裝飾性元素，以
aria-hidden對輔助科技隱藏