Skip to Content
参考手册组件
<Background />

<Background />

GitHub 上的源代码 

¥Source on GitHub 

<Background /> 组件可以方便地渲染基于节点的 UI 中常见的不同类型的背景。它有三种变体：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

#id?
string
When multiple backgrounds are present on the page, each one should have a unique id.
#color?
string
#className?
string
#style?
#patternClassName?
string
#gap?
number | [number, number]
The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
28
#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
2
#lineWidth?
number
The stroke thickness used when drawing the pattern.
1
#variant?
BackgroundVariant.Dots

示例

¥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 prop 非常重要！

    ¥When combining multiple <Background /> components it’s important to give each of them a unique id prop!

组件
<BaseEdge />