<Background />

<Background /> 元件可以方便地渲染基於節點的 UI 中常見的不同類型背景。它帶有三種變體：lines、dots 和 cross。

import { useState } from 'react';
import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
      <Background color="#ccc" variant={BackgroundVariant.Dots} />
    </ReactFlow>
  );
}

屬性

名稱	類型	預設值
#`id?`	`字串` 當頁面上有多個背景時，每個背景都應具有唯一的 ID。
#`color?`	`字串`
#`className?`	`字串`
#`style?`	`React.CSSProperties`
#`patternClassName?`	`字串`
#`gap?`	`數字 \| [數字, 數字]` 模式之間的間距。傳遞一個元組可讓您獨立控制 x 和 y 間距。	`28`
#`size?`	`數字` 如果使用 BackgroundVariant.Dots 或 BackgroundVariant.Cross，則每個點的半徑或每個矩形的大小。如果使用 BackgroundVariant.Lines，則預設值分別為 1 或 6，或忽略此值。
#`offset?`	`數字`	`2`
#`lineWidth?`	`數字` 繪製圖案時使用的筆畫粗細。	`1`
#`variant?`	`BackgroundVariant`	`BackgroundVariant.Dots`

範例

結合多個背景

可以將多個 <Background /> 元件疊放在彼此之上，以建立更有趣的視覺效果。以下範例顯示如何渲染每 10 行加重的方格網格。

import { ReactFlow,  Background, BackgroundVariant } from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
export default function Flow() {
  return (
    <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
      <Background
        id="1"
        gap={10}
        color="#f1f1f1"
        variant={BackgroundVariant.Lines}
      />
 
      <Background
        id="2"
        gap={100}
        color="#ccc"
        variant={BackgroundVariant.Lines}
      />
    </ReactFlow>
  );
}

注意事項

結合多個 <Background /> 元件時，請務必為每個元件提供唯一的 id 屬性！

元件類型