Raft 设计系统
English

组件 · 任务

TaskList

The list view of tasks — one collapsible group per status, in status order, each holding task cards.

稳定
import { TaskList } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

A TaskList groups tasks by status, one collapsible group per status, in the same order as the columns of a TaskBoard. It is the default view on a phone. When to show which view, and which groups start collapsed, is in Tasks.

task-list/compositions/task-list

When to use

SituationUse
Tasks on a phone or in a narrow panelTaskList
Tasks by status, with room for five columnsTaskBoard
One taskTaskCard

Anatomy

  • TaskListRoot: the stack of groups. Required.
  • TaskSection: one status. A collapsible section. Required, one per status.
    • TaskSectionTrigger: the group heading, which collapses the group.
      • TaskSectionChevron: the arrow before the heading.
      • TaskSectionHeading: TaskSectionBadge (the status pixel and name) and TaskSectionCount.
    • TaskSectionPanel and TaskSectionItems: the cards.
    • TaskSectionEmpty: what an empty group says.

States

StateLook
CollapsedOnly the heading and its count show
Empty groupA dashed line-seam box with one line of text in foreground-hint
task-list/compositions/task-list-empty-sections

Behavior

  • Scroll every group in one viewport. Groups don't scroll on their own.
  • Mount only the visible cards of a tall group: make VirtualList the viewport, with the group headers and cards as its rows, or use a virtualizer of your own.

Content

  • Write an empty group as "No", the status and "tasks", with the status spelled as on its chip (Writing): "No In Review tasks."

Accessibility

  • Each group is a Base UI Collapsible rendered as a section; its trigger is a button with aria-expanded, named by the status and count it contains.
  • Show the count in the heading also when the group is collapsed, so the trigger still says how many tasks it hides.

API

TaskListRoot

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskSection

Prop类型默认值
defaultOpenWhether the collapsible panel is initially open.booleanfalse
disabledWhether the component should ignore user interaction.booleanfalse
onOpenChangeEvent handler called when the panel is opened or closed.(open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void
openWhether the collapsible panel is currently open.boolean
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskSectionBadge

Prop类型默认值
status (required)TaskStatusId
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskSectionChevron, TaskSectionCount, TaskSectionEmpty, TaskSectionHeading, TaskSectionItems

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskSectionPanel

Prop类型默认值
hiddenUntilFoundAllows the browser's built-in page search to find and expand the panel contents.booleanfalse
keepMountedWhether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used.booleanfalse
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskSectionTrigger

Prop类型默认值
nativeButtonWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).booleantrue
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件