R
交互控件TaskList拖底排序划除动效受控

任务清单

勾选完成的任务会被划掉并自动移动到列表底部，支持受控与非受控两种用法。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/task-list.tsx。

npx shadcn@latest add swamimalode07/rare-ui/task-list

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

task-list.tsx
import { TaskList } from "@/components/ui/task-list"


export function Demo() {
  return (
    <TaskList
      accent="#fc4c01"
      defaultTasks={[
        { id: "1", label: "接入注册表" },
        { id: "2", label: "替换主题色" },
        { id: "3", label: "发布上线", done: true },
      ]}
      onTasksChange={(tasks) => console.log(tasks)}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
tasksTask[]—受控任务列表。
defaultTasksTask[]—非受控初始任务。
size"sm" | "md" | "lg""md"尺寸。
accentstring—勾选强调色。
onTasksChange(tasks: Task[]) => void—列表变化回调。