Skip to Content
πŸ“£ We just released Svelte Flow 1.0 Alpha β€” try it out and give us your feedback!
ReferenceComponents<EdgeLabel />

<EdgeLabel />

Source on GitHub 

The <EdgeLabel /> component is used in your custom edges to display an edge label that selects the edge when it is clicked.

CustomEdge.svelte
<script lang="ts"> import { getBezierPath, type EdgeProps } from '@xyflow/svelte'; type $$Props = EdgeProps; export let id: $$Props['id'] = undefined; export let label: $$Props['label'] = undefined; export let labelStyle: $$Props['labelStyle'] = undefined; export let sourceX: $$Props['sourceX']; export let sourceY: $$Props['sourceY']; export let sourcePosition: $$Props['sourcePosition']; export let targetX: $$Props['targetX']; export let targetY: $$Props['targetY']; export let targetPosition: $$Props['targetPosition']; $: [path, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, curvature: pathOptions?.curvature }); </script> <path {id} d={path} fill="none" /> {#if label} <EdgeLabel x={labelX} y={labelY} style={labelStyle}> {label} </EdgeLabel> {/if}

Props

#style?
string
#x?
number
#y?
number
Last updated on