資料展示
File Tree
資料夾／檔案結構的樹狀展示，支援展開收合動畫、層級導引線與依副檔名的圖示。
以動畫呈現資料夾與檔案階層：點擊資料夾以彈簧節奏展開，子項逐列 stagger 揭示，並依副檔名自動配對圖示。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add file-treePlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
0.03
16
編輯中的呼叫預設屬性
<FileTree/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/file-tree.json或在 components.json 設定 registries 後，改用 @webberui/file-tree 安裝。
使用
import { FileTree, type FileTreeNode } from "@/components/ui/file-tree";
const tree: FileTreeNode[] = [
{
name: "app",
defaultOpen: true,
children: [
{ name: "layout.tsx" },
{ name: "page.tsx", badge: "M" },
],
},
{ name: "package.json" },
];
<FileTree data={tree} defaultExpandedDepth={1} />;節點若帶有 children（即使是空陣列）即視為資料夾，否則視為檔案。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
data | FileTreeNode[] | — | 樹狀資料 |
defaultExpandedDepth | number | 1 | 此深度以內的資料夾預設展開（0 為全收合） |
stagger | number | 0.03 | 每列進場間隔（秒），另暴露為 --wb-file-stagger |
showLines | boolean | true | 是否顯示縮排的層級導引線 |
indent | number | 16 | 每層縮排單位（px） |
className | string | — | 透傳至外層容器 |
FileTreeNode
| 欄位 | 型別 | 說明 |
|---|---|---|
name | string | 顯示名稱 |
children | FileTreeNode[] | 子節點；存在即代表為資料夾 |
defaultOpen | boolean | 該資料夾是否預設展開 |
icon | LucideIcon | 覆寫節點圖示 |
badge | string | 右側徽章文字，例如 M、A |
可及性
- 外層為
role="tree"，各節點為role="treeitem"，資料夾帶aria-expanded - 使用者系統開啟「減少動態效果」時，展開收合與逐列進場都改為立即切換
- 首次渲染與 SSR 一致，掛載後才決定是否啟用動畫，避免 hydration mismatch