Kanban

Cards in columns moved by drag and drop — and by the keyboard (Space, the arrows, Space) — every move announced, column limits in the counts.

WebBêtaAffichage de données

Web uniquement — React, depuis @krizaka/ui/kanban. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Orochia admin's moderation queue (to review, reviewing, resolved), moved by keyboard as well as by drag.

Quand l’utiliser

Orochia's moderation queue: to review, reviewing, resolved.
A release plan, a support queue.

Quand ne pas l’utiliser

On a phone: a segmented list per column moves cards with an action sheet.À la place : Segmented
For an ordered list without stages.À la place : List

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Kanban } from "@krizaka/ui/kanban";

Exemples

Moderation queue

Reports moved between three stages, the first column limited.

To review

2/3

Backflip on the beachDangerous act
Cover of the summer hitCopyright

Reviewing

Night driveCopyright

Resolved

Q&A with fansSpam

Props

A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the arrow keys, every step announced. Column limits show in the counts.

Prop	Type	Défaut	Description
`aria-label`requis	`string`	—	The board's accessible name (“Moderation queue”).
`cards`requis	`readonly T[]`	—	The cards, in their order within each column.
`columns`requis	`readonly KanbanColumn[]`	—	The columns, in order.
`getColumn`requis	`(card: T) => string`	—	A card's column.
`getId`requis	`(card: T) => string`	—	A card's id.
`getTitle`requis	`(card: T) => string`	—	A card's name, for the announcements.
`onMove`requis	`(move: KanbanMove) => void`	—	Called when a card is dropped somewhere new: update the data here.
`renderCard`requis	`(card: T) => ReactNode`	—	What a card shows.
`className`	`string`	—	Classes merged on the root.
`labels`	`Partial<KanbanLabels>`	—	The words, passed translated; English by default.

Accessibilité

Every pick, move, drop and cancel is announced in words (labels).
Each card describes how to move it; each column is a named region.

Clavier

Touches	Action
`Space / Enter`	Picks the focused card up, or drops the carried one.
`Arrow Left / Arrow Right`	Carry the card to the previous or next column.
`Arrow Up / Arrow Down`	Move it within its column.
`Esc`	Puts the card back where it was.

Bonnes pratiques

Update the data in onMove: the board shows cards as given.
Set limit on the columns that must not overflow.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub