<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`	`number` 標籤應呈現的 x 位置。
#`y`	`number` 標籤應呈現的 y 位置。
#`label`	`string \| React.ReactNode` 要沿著邊緣呈現的文字或標籤。
#`labelStyle`	`React.CSSProperties` 要套用至標籤的自訂樣式。	`{}`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

此外，您也可以傳遞任何標準的 React HTML 屬性，例如 onClick、className 等。

元件類型