带标签的组节点

🌐 Labeled Group Node

带有可选标签的组节点。

🌐 A group node with an optional label.

Dependencies:

@xyflow/react shadcn/ui/http://localhost:3004/base-node

安装

在安装组件之前，务必遵循先决条件。


npx shadcn@latest add https://ui.reactflow.dev/labeled-group-node


pnpm dlx shadcn@latest add https://ui.reactflow.dev/labeled-group-node


yarn dlx shadcn@latest add https://ui.reactflow.dev/labeled-group-node


bun x shadcn@latest add https://ui.reactflow.dev/labeled-group-node

用法

1. 将组件复制到你的应用中


import { memo } from "react";
 
import { GroupNode } from "@/components/labeled-group-node";
 
const LabeledGroupNodeDemo = memo(() => <GroupNode label="Label" />);
 
export default LabeledGroupNodeDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow, Node } from "@xyflow/react";
import LabeledGroupNodeDemo from "./component-example";
 
const nodeTypes = {
  labeledGroupNode: LabeledGroupNodeDemo,
};
 
const defaultNodes: Node[] = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Group Node" },
    width: 380,
    height: 200,
    type: "labeledGroupNode",
  },
  {
    id: "2",
    position: { x: 50, y: 100 },
    data: { label: "Node" },
    type: "default",
    parentId: "1",
    extent: "parent",
  },
  {
    id: "3",
    position: { x: 200, y: 50 },
    data: { label: "Node" },
    type: "default",
    parentId: "1",
    extent: "parent",
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}