かんばんKanbanExperimental
横スクロールのボードレイアウトです。
プレビュー
Layout scope
KanbanTemplate provides the responsive shell for sidebar, header, and horizontally scrolling columns. It does not own card state, column data, or drag-and-drop behavior. Wire those pieces in the consuming app.
For a production board, pair this shell with dnd-kitand keep stable item ids, keyboard sensors, and SSR-safe aria ids in the board implementation.
状態とバリエーション
sidebar と header はどちらも省略できます。列は children にそのまま並べ、幅が足りなければ横に流れます。
案内と見出しつき
左に案内、上に見出しを置いた標準形です。左の案内は中くらいの幅から現れます。
設計ボード
未着手
配色を決める
進行中
一覧画面を組む
案内を外す
sidebar を省くと列が左端から始まります。ボードが1枚しか無いときはこの形です。
設計ボード
未着手
配色を決める
進行中
一覧画面を組む
列だけ
header も外すと列だけが残ります。すでに見出しを持つ画面へ埋め込むときに使います。
未着手
配色を決める
進行中
一覧画面を組む
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| sidebar | React.ReactNode | - | Content for the sidebar panel. |
| header | React.ReactNode | - | Content for the top header bar. |
| children | React.ReactNode | - | The main content area, typically horizontally scrolling columns. |
| className | string | - | Additional classes for the root container. |
Usage
import { KanbanTemplate, Card, CardHeader, CardTitle } from "@gunjo/ui";
export function KanbanPage() {
return (
<KanbanTemplate
header={<div>My Board</div>}
sidebar={<div>Sidebar</div>}
>
{/* Column 1 */}
<div className="w-80 flex-shrink-0 flex flex-col gap-4">
<h3>To Do</h3>
<Card>
<CardHeader><CardTitle>Task 1</CardTitle></CardHeader>
</Card>
</div>
{/* Column 2 */}
<div className="w-80 flex-shrink-0 flex flex-col gap-4">
<h3>In Progress</h3>
<Card>
<CardHeader><CardTitle>Task 2</CardTitle></CardHeader>
</Card>
</div>
</KanbanTemplate>
)
}