Dot Leader Contents
書籍目錄版式的目錄元件：點狀引線從左往右逐點延伸連上頁碼，hover 自列尾浮出預覽小卡。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/dot-leader-contents.json安裝時會一併寫入 --wb-duration-fast、--wb-ease-out CSS 變數到你的全域樣式。
安裝依賴後，從 registry JSON（/r/dot-leader-contents.json 的 files[0].content）複製 dot-leader-contents.tsx 原始碼到你的 components/ui/ 目錄，並在全域 CSS 加入：
npm install motion clsx tailwind-merge:root {
--wb-duration-fast: 200ms;
--wb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}使用
import { DotLeaderContents } from "@/components/ui/dot-leader-contents";
<DotLeaderContents
items={[
{ id: "origin", title: "第一章 起源", label: "01" },
{ id: "voyage", title: "第二章 遠航", label: "02" },
]}
onSelect={(id) => console.log(id)}
/>Props
DotLeaderContents
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | DotLeaderItem[] | — | 目錄項目列表 |
onSelect | (id: string) => void | — | 點擊某列時觸發；未提供時退回捲動至與 id 相同的頁面錨點 |
className | string | — | 外層 <nav> 的額外 class |
DotLeaderItem
| 欄位 | 型別 | 說明 |
|---|---|---|
id | string | 唯一識別碼；點擊時傳給 onSelect，未提供 onSelect 時作為頁面錨點 id |
title | string | 章節標題（列左側） |
label | string | 編號或頁碼字串（列右側） |
preview | ReactNode | 選填：hover 該列時自列尾浮出的預覽內容（縮圖、色塊等） |
細節
- 進場：
whileInView+ stagger 逐列浮現；點線以scaleXorigin-left 從左往右延伸，編號在點線連上後淡入 - 點線：
radial-gradient重複點陣 +overflow-hidden容器，顏色走currentColor，不需額外 DOM 節點 - Hover：點線加深、標題右移 4px、編號放大；帶
preview的列自列尾浮出預覽小卡（鍵盤聚焦同樣觸發） - 未提供
onSelect時，點擊會平滑捲動至與id相同的頁面錨點 - 使用者系統開啟「減少動態效果」時，直接顯示完整目錄，捲動改為即時跳轉、hover 只保留顏色變化