IvyLabs Design BostonIvy 爬山虎 v0.3.0

组件 · 任务

TaskRow

列表视图里的一行任务,配合 TaskList 容器使用。

调用方提供:title、id(如 #42)、done、priority(1–5)、selected、labels: [{ name, tone }]、due 与 dueTone(today | overdue)、assignees: [{ initial, tone, name }],以及可选的元信息 timer、checklist(如 2/4)、repeat(如「每周」)、reminder、comments、attachments。

布局:左边是勾选框;中间是标题、编号和元信息图标;右边依次是标签、优先级(3 及以上)、截止日期、指派人。窄于约 600px 时右侧整组换到第二行。

三种风格下的差异

规则:标题单行省略,悬停或聚焦时显示全文;完成的任务标题加删除线并换成 text-muted;逾期必须写出「逾期 N 天」,不能只靠红色。

预览