<NodeToolbar />

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

🌐 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。此外，<NodeToolbar /> 组件接受 HTML <div /> 元素的所有 props。

🌐 For TypeScript users, the props type for the <NodeToolbar /> component is exported as NodeToolbarProps. Additionally, the <NodeToolbar /> component accepts all props of the HTML <div /> element.

Name	Type	Default
`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` If `true`, node toolbar is visible even if node is not selected.
`position`	`Position` Position of the toolbar relative to the node.	`Position.Top`
`offset`	`number` The space between the node and the toolbar, measured in pixels.	`10`
`align`	`Align` Align the toolbar relative to the node.	`"center"`
`...props`	`HTMLAttributes<HTMLDivElement>`

注释

🌐 Notes

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