リファレンスコンポーネント
<Background />

<Background />

GitHub のソース

<Background /> コンポーネントを使用すると、ノードベースの UI で一般的なさまざまな種類の背景を簡単にレンダリングできます。 lines、dots、cross の 3 つのバリアントが用意されています。

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 が使用されている場合、各ドットの半径または各四角形のサイズ。デフォルトはそれぞれ 1 または 6 です。BackgroundVariant.Lines が使用されている場合は無視されます。
#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 プロパティを指定することが重要です。
コンポーネント型