节点附录
🌐 Node Appendix
一个用于动态向绝对定位容器中的节点附加信息的封装器组件。
🌐 A wrapper component for dynamically appending information to nodes in an absolutely positioned container.
Dependencies:
@xyflow/react安装
在安装组件之前，务必遵循 先决条件 。
npx shadcn@latest add https://ui.reactflow.dev/node-appendix用法
1. 将组件复制到你的应用中
import { NodeAppendix } from "@/components/node-appendix";
import {
BaseNode,
BaseNodeContent,
BaseNodeHeader,
BaseNodeHeaderTitle,
} from "../base-node";
export const NodeAppendixDemo = () => {
return (
<BaseNode>
<NodeAppendix position="bottom" className="p-2">
Add custom content to the node appendix.
</NodeAppendix>
<BaseNodeHeader className="border-b">
<BaseNodeHeaderTitle>Custom Node</BaseNodeHeaderTitle>
</BaseNodeHeader>
<BaseNodeContent>
<p>Node Content goes here.</p>
</BaseNodeContent>
</BaseNode>
);
};2. Connect the component with your React Flow application.
import { Background, ReactFlow } from "@xyflow/react";
import { NodeAppendixDemo } from "./component-example";
const nodeTypes = {
appendixNode: NodeAppendixDemo,
};
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: {},
type: "appendixNode",
},
];
export default function App() {
return (
<div className="h-full w-full">
<ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
<Background />
</ReactFlow>
</div>
);
}示例
Last updated on