boardMoveFormId
A kanban board: columns of cards a person drags from one column to another.
Todo
2No issues
- WEB-12Fix the cart badge
- WEB-14Keep the country on reset
In progress
1No issues
Done
0No issues
View code
<Board id="web" label="Issues by status">
<Board.Column value="todo" title="Todo" count={2} empty="No issues">
<Board.Card value="WEB-12" move={{ action: "/issues/WEB-12", name: "status" }}>
<a href="/issues/WEB-12">Fix the cart badge</a>
</Board.Card>
<Board.Card value="WEB-14" move={{ action: "/issues/WEB-14", name: "status" }}>
<a href="/issues/WEB-14">Keep the country on reset</a>
</Board.Card>
</Board.Column>
<Board.Column value="started" title="In progress" count={1} empty="No issues">
<Board.Card value="WEB-9" move={{ action: "/issues/WEB-9", name: "status" }}>
<a href="/issues/WEB-9">Queue edits while offline</a>
</Board.Card>
</Board.Column>
<Board.Column value="done" title="Done" count={0} empty="No issues" />
</Board>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Issue trackerCairnCairn, an invented issue tracker: grouped issue lists with filters in the address, a drag-and-drop board, projects on a roadmap, cycles with burn-up charts and an inbox./demo/apps/cairn
- Social networkChorusChorus, an invented social network: a live timeline with pictures, link cards, polls and threads, profiles, grouped notifications, search and messages./demo/apps/chorus
- Code hostDeltaDelta, a code host whose one repository is its own source: a file tree beside the code, line links, blame and the commits list, every file and commit read from git when the site is built./demo/apps/delta
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
- Chat assistantTernTern, an invented chat assistant: conversations with streamed replies, code and tables, projects, a canvas, sharing and settings./demo/apps/tern
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { boardMoveFormId } from "@sdxc/ui/app";The id of a card's move form, for a menu row that moves the card by submitting it with the
column's value as its own name and value.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
Also exported
Other components this module publishes.
Board