参考组件
<NodeToolbar />

<NodeToolbar />

GitHub 源码

此组件可以将工具栏或工具提示渲染到自定义节点的一侧。此工具栏不会随视窗缩放，因此内容始终可见。

import { memo } from 'react';
import { Handle, Position, NodeToolbar } from '@xyflow/react';
 
export CustomNode = ({ data }) => {
  return (
    <>
      <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition}>
        <button>delete</button>
        <button>copy</button>
        <button>expand</button>
      </NodeToolbar>
 
      <div style={{ padding: '10px 20px' }}>
        {data.label}
      </div>
 
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </>
  );
};
 
export default memo(CustomNode);

属性

对于 TypeScript 用户，<NodeToolbar /> 组件的属性类型以 NodeToolbarProps 导出。

#nodeId?
string | string[]
通过传入节点 ID 数组，你可以为一组或多个节点渲染单个工具提示。
#isVisible?
boolean
#position?
Position
#offset?
number
节点和工具栏之间的间距，以像素为单位。
10
#align?
"center" | "start" | "end"

备注

  • 默认情况下，工具栏仅在节点被选中时可见。如果选中了多个节点，它将不会可见，以防止工具栏重叠或杂乱。你可以通过将 isVisible 属性设置为 true 来覆盖此行为。
组件类型