Folder
folder点击展开的 3D 文件夹 · 三层纸张扇形铺开 + 展开后磁吸跟随鼠标(零依赖纯 CSS transform·token 派生·reduced-motion)
用法
基础用法
点击文件夹展开/收起，纸张扇形铺开，展开后纸张磁吸跟随鼠标。
tsx
<Folder />带内容纸张
items 最多 3 张纸（多余截断、不足补空），展开后各自铺开承载内容。
tsx
<Folder
size={1.4}
items={[
<span key="1" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">文档</span>,
<span key="2" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">图片</span>,
<span key="3" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">视频</span>,
]}
/>自定义主体色
color 喂任意 CSS 颜色（推荐 token），defaultOpen 让文件夹初始即展开。
tsx
<Folder color="var(--color-chart-4)" defaultOpen size={1.2} />关闭磁吸
disableMagnet 时展开后纸张不再随鼠标偏移，仅保留悬停放大。
tsx
<Folder size={1.4} disableMagnet defaultOpen />何时用
需要一个有趣味交互的「文件夹」展示控件——点击展开、最多 3 张纸扇形铺开、展开后磁吸跟随鼠标时用，适合作品集/文件分组/装饰性入口。要做真实的多层级文件树导航请用 FileTree/Tree；要做表格化数据展示用 Table。
导入
ts
import { Folder } from "@hulianui/ui"Props
继承 <div> 属性（已 Omit 掉 color/onClick，由下表重定义）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| color | string | var(--color-primary) | 文件夹主体色，接受任意 CSS 颜色，推荐喂 token；showcase 备选 chart-1/2/4 |
| size | number | 1 | 整体缩放倍数（基准 100×80px） |
| open | boolean | — | 受控展开态；提供时组件受控，须配 onOpenChange |
| defaultOpen | boolean | false | 默认展开态（非受控） |
| disableMagnet | boolean | false | 关闭磁吸跟随（展开后纸张不再随鼠标偏移） |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | MouseEventHandler<HTMLButtonElement> | 点击文件夹（触发展开/收起）时回调 |
| onOpenChange | (open: boolean) => void | 展开态变化回调（受控/非受控均触发） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| items | ReactNode[] | 最多 3 张纸张内容（多余截断、不足补空），展开后扇形铺开并磁吸跟随 |
禁忌 / 坑
items超过 3 张会被截断、不足会补空白纸，不要指望它渲染任意数量内容。- 受控用法须同时给
open+onOpenChange，只给open不给回调会导致点击无法切换状态。 - 颜色 token 须带
--color-前缀，裸var(--primary)不解析。 - 候选坑 [[nextjs-app-router-underscore-private-folder-404]] 讲的是 Next.js
_folder私有目录路由，与本组件无关，不适用。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Folder
size={1}
color="var(--color-primary)"
disableMagnet={false}
items={[<DocIcon />, <ImgIcon />, <VideoIcon />]}
/>