<EdgeText />

你可以将 <EdgeText /> 组件用作辅助组件，以在自定义边内显示文本。

¥You can use the <EdgeText /> component as a helper component to display text within your custom edges.


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}
    />
  );
}

属性

¥Props

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

¥For TypeScript users, the props type for the <EdgeText /> component is exported as EdgeTextProps.

Name	Type	Default
#`x`	`number` The x position where the label should be rendered.
#`y`	`number` The y position where the label should be rendered.
#`label`	`string \| React.ReactNode` The text or label to render along an edge.
#`labelStyle`	`React.CSSProperties` Custom styles to apply to the label.	`{}`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

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

¥Additionally, you may also pass any standard React HTML attributes such as onClick, className and so on.