参考组件
<NodeResizer />

<NodeResizer />

GitHub 上的源代码

The <NodeResizer /> 组件可用于为节点添加调整大小的功能。它在节点周围呈现可拖动的控件，以便向所有方向调整大小。

import { memo } from 'react';
import { Handle, Position, NodeResizer } from '@xyflow/react';
 
const ResizableNode = ({ data }) => {
  return (
    <>
      <NodeResizer minWidth={100} minHeight={30} />
      <Handle type="target" position={Position.Left} />
      <div style={{ padding: 10 }}>{data.label}</div>
      <Handle type="source" position={Position.Right} />
    </>
  );
};
 
export default memo(ResizableNode);

属性

对于 TypeScript 用户，<NodeResizer /> 组件的属性类型导出为 NodeResizerProps。

#nodeId?
string
#color?
string
#handleClassName?
string
#handleStyle?
#lineClassName?
string
#lineStyle?
#isVisible?
boolean
#minWidth?
number
#minHeight?
number
#maxWidth?
number
#maxHeight?
number
#keepAspectRatio?
boolean
#shouldResize?
(event: D3.DragEvent,params: ResizeParams & { direction: number[]; }) => boolean
#onResizeStart?
(event: D3.DragEvent,params: ResizeParams) => void
#onResize?
(event: D3.DragEvent,params: ResizeParams & { direction: number[]; }) => void
#onResizeEnd?
(event: D3.DragEvent,params: ResizeParams) => void

示例

转到 示例页面 以了解如何做到这一点。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}
只读

自定义调整大小控件

要构建自定义调整大小控件，可以使用 NodeResizeControl 组件并对其进行自定义。

注意

组件类型