<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 类。

组件类型