參考元件
<NodeResizer />

<NodeResizer />

在 GitHub 上的原始碼

<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 元件並加以自訂。

注意事項

  • 請參考 NodeProps 類型的文件，或關於 自訂節點 的指南，以了解如何實作您自己的節點。
元件類型