参考组件
<Background />

<Background />

GitHub 源代码

<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?
string
当页面上存在多个背景时，每个背景都应具有唯一的 id。
#color?
string
#className?
string
#style?
#patternClassName?
string
#gap?
number | [number, number]
图案之间的间隙。传递元组可以独立控制 x 和 y 间隙。
28
#size?
number
如果使用 BackgroundVariant.Dots 或 BackgroundVariant.Cross，则为每个点的半径或每个矩形的尺寸。 如果使用 BackgroundVariant.Lines，则默认为 1 或 6，或忽略。
#offset?
number
2
#lineWidth?
number
绘制图案时使用的描边粗细。
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 属性！
组件类型