Folder文件夹
Folder
文件夹
文件树组件，用于展示层级文件结构。
使用import { Folder } from "@ant-design/x"; |
文档 编辑此页... |
版本自 2.4.0 起支持 |
Ant Design X通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| treeData | 文件树数据 | FolderTreeData[] | [] | - |
| selectable | 是否开启选择功能 | boolean | true | - |
| selectedFile | 选中的文件路径（受控） | string[] | - | - |
| defaultSelectedFile | 默认选中的文件路径 | string[] | [] | - |
| onSelectedFileChange | 文件选择变化时的回调 | (file: { path: string[]; name?: string; content?: string }) => void | - | - |
| directoryTreeWith | 目录树宽度 | number | string | 278 | - |
| emptyRender | 空状态时的展示内容 | React.ReactNode | (() => React.ReactNode) | - | - |
| previewRender | 自定义文件预览内容 | React.ReactNode | ((file: { content?: string; path: string[]; title?: React.ReactNode; language: string }, info: { originNode: React.ReactNode }) => React.ReactNode) | - | - |
| expandedPaths | 展开的节点路径数组（受控） | string[] | - | - |
| defaultExpandedPaths | 默认展开的节点路径数组 | string[] | - | - |
| defaultExpandAll | 是否默认展开所有节点 | boolean | true | - |
| onExpandedPathsChange | 展开/收起变化时的回调 | (paths: string[]) => void | - | - |
| fileContentService | 文件内容服务 | FileContentService | - | - |
| onFileClick | 文件点击事件 | (filePath: string, content?: string) => void | - | - |
| onFolderClick | 文件夹点击事件 | (folderPath: string) => void | - | - |
| directoryTitle | 目录树标题 | React.ReactNode | (() => React.ReactNode) | - | - |
| previewTitle | 文件预览标题 | string | (({ title, path, content }: { title: string; path: string[]; content: string }) => React.ReactNode) | - | - |
| directoryIcons | 自定义图标配置 | Record<'directory' | string, React.ReactNode | (() => React.ReactNode)> | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 显示名称 | string | - | - |
| path | 文件路径 | string | - | - |
| content | 文件内容（可选） | string | - | - |
| children | 子项（仅文件夹类型有效） | FolderTreeData[] | - | - |
文件内容服务接口，用于动态加载文件内容。
interface FileContentService {loadFileContent(filePath: string): Promise<string>;}
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgDirectory | 目录背景色 | string | rgba(0,0,0,0.04) |
基础用法。
自定义文件内容服务。
受控文件选择。
完全受控模式。
可搜索的文件浏览器。
自定义文件图标。
使用 previewRender 属性自定义文件预览内容。
previewRender 支持两种形式：
(file, info) => ReactNode，其中：
file: 包含文件信息的对象 { content, path, title, language }info: 包含原始预览节点的对象 { originNode }