<NodeResizer />

<NodeResizer /> 元件可用於為您的節點新增調整大小功能。它會在節點周圍渲染可拖曳的控制項，以在所有方向上調整大小。

CustomNode.svelte

<script lang="ts">
  import { Handle, Position, NodeResizer } from '@xyflow/svelte';
 
  export let data;
</script>
 
<NodeResizer minWidth={100} minHeight={30} />
<Handle type="target" position={Position.Left} />
<div style={{ padding: 10 }}>{data.label}</div>
<Handle type="source" position={Position.Right} />

屬性

對於 TypeScript 使用者，<NodeResizer /> 元件的屬性類型會匯出為 NodeResizerProps。

名稱	類型
#`nodeId?`	`字串`
#`color?`	`字串`
#`handleClass?`	`字串`
#`handleStyle?`	`字串`
#`lineClass?`	`字串`
#`lineStyle?`	`字串`
#`isVisible?`	`布林值`
#`minWidth?`	`數字`
#`minHeight?`	`數字`
#`maxWidth?`	`數字`
#`maxHeight?`	`數字`
#`keepAspectRatio?`	`布林值`
#`shouldResize?`	`(事件: D3.DragEvent, 參數: ResizeParams & { 方向: 數字[]; }) => 布林值`
#`onResizeStart?`	`(事件: D3.DragEvent, 參數: ResizeParams) => void`
#`onResize?`	`(事件: D3.DragEvent, 參數: ResizeParams & { 方向: 數字[]; }) => void`
#`onResizeEnd?`	`(事件: D3.DragEvent, 參數: ResizeParams) => void`

範例

前往範例頁面，了解如何完成此操作。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

唯讀

自訂調整大小控制

若要建置自訂調整大小控制項，您可以使用 NodeResizeControl 元件並進行自訂。

注意事項

查看 NodeProps 類型的文件或關於自訂節點的指南，以了解如何實作您自己的節點。

元件類型