<EdgeToolbar />

此组件可以在自定义边缘的一侧渲染工具栏。该工具栏不会随视口缩放，以便在缩小时内容不会变得太小。

🌐 This component can render a toolbar to one side of a custom edge. This toolbar doesn’t scale with the viewport so that the content doesn’t get too small when zooming out.


import { memo } from 'react';
import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react';
 
function CustomEdge(props: EdgeProps) {
  const [edgePath, centerX, centerY] = getBezierPath(props);
 
  return (
    <>
      <BaseEdge id={props.id} path={edgePath} />
      <EdgeToolbar
        edgeId={props.id}
        x={centerX}
        y={centerY}
        isVisible
      >
        <button>
          some button
        </button>
      </EdgeToolbar>
    </>
  );
}
 
export default memo(CustomEdge);

属性

🌐 Props

Name	Type	Default
`x`	`number` The `x` position of the edge toolbar.
`y`	`number` The `y` position of the edge toolbar.
`isVisible`	`boolean` If `true`, edge toolbar is visible even if edge is not selected.	`false`
`alignX`	`"left" \| "center" \| "right"` Align the vertical toolbar position relative to the passed x position.	`"center"`
`alignY`	`"center" \| "top" \| "bottom"` Align the horizontal toolbar position relative to the passed y position.	`"center"`
`edgeId`	`string` An edge toolbar must be attached to an edge.
`...props`	`HTMLAttributes<HTMLDivElement>`

注释

🌐 Notes

默认情况下，工具栏只有在选中边缘时才可见。你可以通过将 isVisible 属性设置为 true 来覆盖此行为。