실행 미리 보기

실시간

칸반 Resource 보드

카드는 도메인 참조입니다. 드래그는 명령을 제안하며 App이 승인하고 저장합니다.

ResourceBoard

Queued

In progress

Completed

복사 가능한 소스

코드 예시

TSX

import { ResourceBoard } from "@nexia/sdk/host";

export function KanbanBoardExample() {
    return (
        <ResourceBoard
            state="ready"
            readOnly
            projection={{
                board_key: "work-orders",
                version: 1,
                lanes: [
                    {
                        key: "queued",
                        label: "Queued",
                        count: 1,
                        accepted_actions: ["move"],
                        cards: [
                            {
                                resource: {
                                    app_key: "manufacturing",
                                    resource_key: "work_order",
                                    resource_id: "1042",
                                    display: "WO-1042 · Pump housing",
                                },
                                summary: [
                                    {
                                        key: "priority",
                                        label: "Priority",
                                        value: "High",
                                    },
                                ],
                                version: 1,
                                allowed_actions: ["move"],
                            },
                        ],
                    },
                    {
                        key: "done",
                        label: "Completed",
                        count: 0,
                        accepted_actions: ["move"],
                        cards: [],
                    },
                ],
            }}
            labels={{
                board: "Work-order board",
                laneCount: (lane, count) => `${lane} · ${count}`,
                moveCard: (resource) => `Move ${resource}`,
                moveError: (reason) => `Move rejected: ${reason}`,
            }}
        />
    );
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354