Era Strata Layout
把年代／階段疊成水平地層帶的手風琴式版面，展開層垂直撐開、其餘壓縮，層內內容帶視差浮出。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
440
72
<EraStrataLayout />
安裝
npx shadcn@latest add https://webberui.com/r/era-strata-layout.json或在 components.json 設定 registries 後，改用 @webberui/era-strata-layout 安裝。
安裝依賴後，從 registry JSON（/r/era-strata-layout.json 的 files[0].content）複製 era-strata-layout.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import {
EraStrataLayout,
type EraStratumData,
} from "@/components/ui/era-strata-layout";
const eras: EraStratumData[] = [
{
id: "1998",
era: "1998",
title: "車庫創業",
summary: "三個人、一台伺服器。",
content: "第一個版本在深夜上線。",
accentClassName: "bg-amber-400 dark:bg-amber-500",
},
// ...
];
<EraStrataLayout items={eras} height={440} defaultActive={0} />;trigger 可切換觸發方式：click（預設）、hover 懸停展開，或 scroll 隨頁面捲動逐層推進。
// 隨捲動推進：捲進巢狀容器時把該容器 ref 傳入 container
<EraStrataLayout items={eras} trigger="scroll" height={480} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | EraStratumData[] | — | 地層資料，依序由上而下堆疊 |
active | number | — | 受控的展開索引（click／hover 模式生效） |
defaultActive | number | 0 | 非受控模式的初始展開索引 |
onActiveChange | (index: number) => void | — | 展開索引變更時觸發 |
trigger | "click" | "hover" | "scroll" | "click" | 觸發展開的方式 |
height | number | string | 440 | 版面總高度（數字為 px） |
collapsedSize | number | 72 | 收合地層／標題列的高度（px） |
parallax | boolean | true | 內容是否帶視差浮出 |
container | RefObject<HTMLElement | null> | — | scroll 模式的巢狀捲動容器 ref |
label | string | "年代地層" | 無障礙標籤 |
className | string | — | 外層容器 class |
stratumClassName | string | — | 套用在每個地層帶上的 class |
EraStratumData
| 欄位 | 型別 | 說明 |
|---|---|---|
id | string | 穩定識別碼，作為無障礙錨點與 key |
era | ReactNode | 年代／階段標記，收合時仍可見 |
title | ReactNode | 章節標題，收合時仍可見 |
summary | ReactNode | 展開時最先浮出的一句摘要 |
content | ReactNode | 展開時帶視差浮出的主要內容 |
accentClassName | string | 左側地層色條的強調色 class |
細節
- 展開層以彈簧轉場垂直撐開，其餘地層同步壓縮回
collapsedSize，只留標題列可見 - 使用 flexbox 的
flex-grow分配剩餘空間，同一時間恰有一層展開；請確保height≥collapsedSize × 地層數 - 層內
summary與content以不同起始位移依序浮出，形成視差層次；parallax={false}時僅保留淡入 scroll模式會撐出對應的捲動高度並釘住視窗，捲動進度映射到展開的地層；點擊某層會平滑捲動至該層
可及性
- 每個地層標題為原生
button，帶aria-expanded與aria-controls，內容區為role="region"並以標題aria-labelledby - 標題列採 roving tabindex：
Tab進入後以↑／↓（或←／→）在各層間移動，Home／End跳至首尾，Enter／Space展開 - 收合的內容區標記
inert與aria-hidden，不會被鍵盤或輔助科技誤入 - 使用者系統開啟「減少動態效果」時，改為全展開的靜態清單，所有內容一次呈現、不做壓縮或動畫