<Background />

<Background /> 组件使渲染节点式用户界面中常见的不同类型背景变得方便。它有三个变体：lines、dots 和 cross。

🌐 The <Background /> component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and 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>
  );
}

属性

🌐 Props

Name	Type	Default
`id`	`string` When multiple backgrounds are present on the page, each one should have a unique id.
`color`	`string` Color of the pattern.
`bgColor`	`string` Color of the background.
`className`	`string` Class applied to the container.
`patternClassName`	`string` Class applied to the pattern.
`gap`	`number \| [number, number]` The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.	`20`
`size`	`number` The radius of each dot or the size of each rectangle if `BackgroundVariant.Dots` or `BackgroundVariant.Cross` is used. This defaults to 1 or 6 respectively, or ignored if `BackgroundVariant.Lines` is used.
`offset`	`number \| [number, number]` Offset of the pattern.	`0`
`lineWidth`	`number` The stroke thickness used when drawing the pattern.	`1`
`variant`	`BackgroundVariant` Variant of the pattern.	`BackgroundVariant.Dots`
`style`	`CSSProperties` Style applied to the container.

示例

🌐 Examples

组合多个背景

🌐 Combining multiple backgrounds

可以将多个 <Background /> 组件叠加在一起，以创建更有趣的效果。以下示例展示了如何渲染一个每第10条线有强调的方形网格。

🌐 It is possible to layer multiple <Background /> components on top of one another to create something more interesting. The following example shows how to render a square grid accented every 10th line.


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

注释

🌐 Notes

在组合多个 <Background /> 组件时，为每个组件提供一个唯一的 id 属性非常重要！