かんばん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.

Props

表は横にスクロールできます
プロパティ型初期値説明
sidebarReact.ReactNode-Content for the sidebar panel.
headerReact.ReactNode-Content for the top header bar.
childrenReact.ReactNode-The main content area, typically horizontally scrolling columns.
classNamestring-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>
  )
}