<EdgeText />

你可以使用 <EdgeText /> 组件作为辅助组件在自定义边中显示文本。

import { EdgeText } from '@xyflow/react';
 
export function CustomEdgeLabel({ label }) {
  return (
    <EdgeText
      x={100}
      y={100}
      label={label}
      labelStyle={{ fill: 'white' }}
      labelShowBg
      labelBgStyle={{ fill: 'red' }}
      labelBgPadding={[2, 4]}
      labelBgBorderRadius={2}
    />
  );
}

属性

对于 TypeScript 用户，<EdgeText /> 组件的属性类型导出为 EdgeTextProps。

名称	类型	默认值
#`x`	`数字` 标签应渲染的 x 位置。
#`y`	`数字` 标签应渲染的 y 位置。
#`label`	`字符串 \| React.ReactNode` 沿边渲染的文本或标签。
#`labelStyle`	`React.CSSProperties` 要应用于标签的自定义样式。	`{}`
#`labelShowBg`	`布尔值`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[数字, 数字]`
#`labelBgBorderRadius`	`数字`

此外，您还可以传递任何标准的 React HTML 属性，例如 onClick、className 等。

组件类型