Drilldown Stat Grid

KPI 磚牆網格，點擊磚塊即在該列下方展開全寬詳情，其餘磚塊讓位下移，再次點擊收回。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

網格欄數columns

預設展開磚塊defaultOpenId

動畫時長（秒）duration

0.32

<DrilldownStatGrid />

安裝

npx shadcn@latest add https://webberui.com/r/drilldown-stat-grid.json

或在 components.json 設定 registries 後，改用 @webberui/drilldown-stat-grid 安裝。

安裝依賴後，從 registry JSON（/r/drilldown-stat-grid.json 的 files[0].content）複製 drilldown-stat-grid.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import {
  DrilldownStatGrid,
  type DrilldownStat,
} from "@/components/ui/drilldown-stat-grid";

const stats: DrilldownStat[] = [
  {
    id: "revenue",
    label: "本月營收",
    value: "$32.5k",
    delta: 12.4,
    trend: [18, 22, 20, 26, 24, 30, 33],
    detail: <p>營收較上月成長 12.4%，主要由訂閱制方案續約推動。</p>,
  },
  // ...更多 KPI
];

<DrilldownStatGrid stats={stats} columns={3} />;

受控模式

傳入 openId 與 onOpenChange 即進入受控模式，可由外部（例如網址參數或其他面板）決定展開哪一塊磚塊：

const [openId, setOpenId] = React.useState<string | null>("revenue");

<DrilldownStatGrid stats={stats} openId={openId} onOpenChange={setOpenId} />;

未傳 openId 時為非受控，內部自行管理狀態，可用 defaultOpenId 指定初始展開項目。

自訂詳情

renderDetail 會覆寫 stat.detail，適合根據每塊磚塊即時算出下鑽內容：

<DrilldownStatGrid
  stats={stats}
  renderDetail={(stat) => <MyChart metric={stat.id} />}
/>;

Props

DrilldownStatGrid

Prop	型別	預設值	說明
`stats`	`DrilldownStat[]`	—	KPI 磚塊資料
`columns`	`number`	`3`	網格欄數，決定詳情插入位置與讓位行為
`openId`	`string \| null`	—	受控模式：目前展開的磚塊 id
`defaultOpenId`	`string \| null`	`null`	非受控模式的初始展開 id
`onOpenChange`	`(id: string \| null) => void`	—	展開／收合時觸發
`renderDetail`	`(stat: DrilldownStat) => ReactNode`	—	自訂詳情內容，覆寫 `stat.detail`
`duration`	`number`	`0.32`	展開／收合時長（秒）
`className`	`string`	—	附加到網格容器
`tileClassName`	`string`	—	附加到每塊磚塊按鈕

DrilldownStat

欄位	型別	說明
`id`	`string`	唯一鍵，讓位配對與受控展開據此比對，務必穩定
`label`	`ReactNode`	KPI 名稱（磚塊左上小標）
`value`	`ReactNode`	主要數值（請自行格式化）
`unit`	`ReactNode`	數值後的單位（較小字級）
`delta`	`number`	變化百分比，正負決定漲跌配色與箭頭
`deltaLabel`	`ReactNode`	覆寫變化文字；未給時顯示 `+delta%`
`icon`	`ReactNode`	磚塊右上角圖示
`trend`	`number[]`	迷你走勢圖資料點（≥2 點才繪製）
`detail`	`ReactNode`	下鑽展開後的全寬詳情內容

細節

詳情區塊以 grid-column: 1 / -1 佔滿整列，插入在「被點磚塊所在列」的最後一格之後，因此不論點該列哪一格，詳情都在同一位置展開。
展開時全寬列的高度由 0 動畫到 auto，其後的磚塊隨版面高度增長而平滑下移讓位；收合時反向釋放空間，磚塊順勢歸位。
columns 同時決定 CSS 版面與 JS 計算的插入列，兩者必須一致，故採固定欄數而非 auto-fill。

可及性

每塊磚塊為原生 <button>，帶 aria-expanded 與 aria-controls；詳情區塊為 role="region" 並以 aria-labelledby 指回觸發的磚塊。
支援鍵盤操作：Enter / Space 展開或收合，Esc 收合並將焦點移回原磚塊。
使用者系統開啟「減少動態效果」時，展開／收合改為即時切換、停用點按縮放，版面結構維持不變。
走勢圖與箭頭圖示皆標記 aria-hidden，不干擾輔助科技朗讀數值。

Drilldown Stat Grid

On this page