Skip to Content
参考手册组件
<NodeToolbar />

<NodeToolbar />

GitHub 上的源代码 

¥Source on GitHub 

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

¥This component can render a toolbar or tooltip to one side of a custom node. This toolbar doesn’t scale with the viewport so that the content is always visible.

import { memo } from 'react';
import { Handle, Position, NodeToolbar } from '@xyflow/react';
 
const 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);

属性

¥Props

对于 TypeScript 用户，<NodeToolbar /> 组件的 props 类型导出为 NodeToolbarProps。

¥For TypeScript users, the props type for the <NodeToolbar /> component is exported as NodeToolbarProps.

#nodeId?
string | string[]
By passing in an array of node id's you can render a single tooltip for a group or collection of nodes.
#isVisible?
boolean
#position?
#offset?
number
The space between the node and the toolbar, measured in pixels.
10
#align?
"center" | "start" | "end"

注释

¥Notes

  • 默认情况下，只有选择节点时工具栏才可见。如果选择了多个节点，它将不可见，以防止工具栏重叠或混乱。你可以通过将 isVisible 属性设置为 true 来覆盖此行为。

    ¥By default, the toolbar is only visible when a node is selected. If multiple nodes are selected it will not be visible to prevent overlapping toolbars or clutter. You can override this behavior by setting the isVisible prop to true.

<NodeResizer />
<Panel />