<EdgeLabelRenderer />

GitHub 上的原始碼

邊緣是基於 SVG 的。如果您想要渲染更複雜的標籤，您可以使用 <EdgeLabelRenderer /> 元件來存取基於 div 的渲染器。此元件是一個入口，會在邊緣頂部定位的 <div /> 中渲染標籤。您可以在邊緣標籤渲染器範例中看到元件的範例用法。我們內部使用 EdgeLabelRenderer 來渲染邊緣標籤。

CustomEdge.svelte

<script lang="ts">
  import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/svelte';
 
  $: [edgePath, labelX, labelY] = getBezierPath(props);
</script>
 
<BaseEdge id={id} path={edgePath} />
<EdgeLabelRenderer>
  <div
    style={{
      position: 'absolute',
      transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
      background: '#ffcc00',
      padding: 10,
      borderRadius: 5,
      fontSize: 12,
      fontWeight: 700,
    }}
    className="nodrag nopan"
  >
    {data.label}
  </div>
</EdgeLabelRenderer>

屬性

名稱	型別
#`children`	`SvelteComponent`

注意事項

預設情況下，<EdgeLabelRenderer /> 沒有指標事件。如果您想要新增滑鼠互動，您需要設定樣式 pointerEvents: all，並在標籤或您想要互動的元素上新增 nopan 類別。

元件型別