标签叠放展开

优先级、日期和负责人标签相互叠放，为任务标题留出空间；悬停或聚焦时向左展开。

列表交互六框架TypeScript

演示

悬停或聚焦一行展开标签，轻触可固定；上下方向键与 Home/End 导航，Escape 收起。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

StackedMetadata.tsx

正在加载代码…

App.tsx

import { StackedMetadata } from "./StackedMetadata";

export default function App() {
  return <StackedMetadata />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.heading` 列表标题。	`string`	`"In Progress"`
`options.items` 1–12条本地任务；空数组恢复默认三条。	`{ title: string; priority: string; date: string; assignee: string; team?: boolean }[]`
`options.theme` 深色原始外观或浅色预览外观。	`"dark" \| "light"`	`"dark"`
`options.expanded` 初始固定或外部指定的行号；-1收起所有行。	`number`	`-1`
`options.onExpandChange` 用户操作改变当前展开行时回调，外部更新不触发。	`(index: number) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`600`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`