Raft 设计系统
English

组件 · 任务

TaskBoard

The board view of tasks — one column per status, in status order, with cards that can be dragged to another column to change their status.

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

A TaskBoard shows tasks in one column per status, from Todo to Closed. Dragging a card to another column changes its status. It is one of the two views of a set of tasks; the other is the TaskList. When to show which is in Tasks.

task-board/compositions/task-board

When to use

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

Anatomy

  • TaskBoardRoot: the row of columns. Required.
  • TaskBoardColumn: one status. A collapsible section. Required, one per status.
    • TaskBoardColumnTrigger: the column heading, which collapses the column.
      • TaskBoardColumnHeading: TaskBoardColumnBadge (the status pixel and name) and TaskBoardColumnCount.
      • TaskBoardColumnChevron: the arrow that shows whether the column is open.
    • TaskBoardColumnPanel and TaskBoardColumnItems: the cards.
    • TaskBoardColumnEmpty: what an empty column says, with three texts: TaskBoardColumnEmptyIdle normally, TaskBoardColumnEmptyAllowed while a card can be dropped there, TaskBoardColumnEmptyBlocked while it can't.

Drag and drop comes from the TaskDnd parts (TaskDndProvider, TaskDropZone, TaskDraggable), which the board composition wires in.

States

StateLook
Empty columnA dashed line-seam box with one line of text in foreground-hint
A card can be droppedThe empty box hides and the drop placeholder shows; a collapsed column gets a dashed line-strong outline
A card is over a columnThe column keeps its fill; only the drop placeholder marks where the card lands, so one signal says where, not two
A card can't be droppedThe empty box says why, in foreground-muted
task-board/compositions/task-board-empty-columns

Behavior

  • Order the columns Todo, In Progress, In Review, Done, Closed.
  • Switch between the board and the list with Board / List at the right end of the filter bar (Tasks), and remember the person's choice.
  • Scroll the whole board in one viewport, both ways. Columns keep their width and never scroll on their own.
  • Mount only the visible cards of a tall column with a virtualizer of your own that reads the board's scroll position, as below.
task-board/compositions/task-board-virtualization

Content

  • Write the empty text the same way as an empty group in a list (TaskList).
  • While a card is dragged over an empty column, name the status it would get, or say that it can't move there.

Accessibility

  • Each column is a Base UI Collapsible rendered as a section; its trigger is a button with aria-expanded.
  • Give each column an accessible name: the status name in the trigger, or aria-label on the section.
  • Cards can be moved with the keyboard: the drag parts use dnd-kit's keyboard sensor (Space to pick up, the arrow keys to move, Space to drop, Escape to cancel).
  • Announce each move in a polite live region: "Task #25 moved to In Review". The board doesn't announce on its own.

Rules

  • Count the cards in every column heading, in Space Mono.

API

TaskBoardColumn

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.

TaskBoardColumnBadge

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.

TaskBoardColumnChevron, TaskBoardColumnCount, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, TaskBoardColumnEmptyBlocked, TaskBoardColumnEmptyIdle, TaskBoardColumnHeading, TaskBoardColumnItems

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.

TaskBoardColumnPanel

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.

TaskBoardColumnTrigger

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.

TaskBoardRoot

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.

相关组件