<Handle />

GitHub 上的原始碼

<Handle /> 元件用於您的自訂節點中，以定義連接點。

<script lang="ts">
  import { Handle, Position } from '@xyflow/svelte';
</script>
 
<div>
  {data.label}
</div>
 
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />

Props

對於 TypeScript 使用者，<Handle /> 元件的 props 類型會匯出為 HandleProps。

true

範例

帶驗證的自訂 Handle

您可以藉由包裝 <Handle /> 元件來建立自己的自訂 handle。此範例顯示一個自訂 handle，只有在連線來源符合給定的 id 時才允許連線。

<script>
	import { Handle, Position } from '@xyflow/svelte';
 
	export let position;
	export let source;
 
	function isValidConnection(connection) {
		if (connection.source === source) {
			return true;
		}
		return false;
	}
 
</script>
 
<Handle
	type="target"
	position={position}
	{isValidConnection}
	style="background: #fff"
/>

連接時的 Handle 樣式

當連線線位於 handle 上方時，handle 會收到額外的類別名稱 connecting；如果連線有效，則會收到 valid。您可以在此處找到使用這些類別的範例。

多個 Handle

如果您需要多個來源或目標 handle，您可以透過建立自訂節點來實現此目的。通常您只會將節點的 id 用於邊緣的 source 或 target。如果您有多個來源或目標 handle，您需要將 id 傳遞給這些 handle。邊緣可以使用 sourceHandle 和 targetHandle 選項來使用這些 id，這樣您就可以連接特定的 handle。如果您有一個 id = 1 的節點和一個 id = a 的 handle，您可以使用節點 source=1 和 sourceHandle=a 來連接此 handle。

動態 Handle

如果您以程式方式變更自訂節點中 handle 的位置或數量，您需要使用 useUpdateNodeInternals hook 來更新節點內部結構。

您可以在自訂節點指南或自訂節點範例中找到如何實作具有多個 handle 的自訂節點的範例。

自訂 Handle 樣式

由於 handle 是一個 div，您可以使用 CSS 來設定其樣式，或傳遞 style prop 來客製化 Handle。您可以在邊緣放置新增節點和簡單浮動邊緣範例中看到此範例。