<Background />

该 <Background /> 组件便于渲染节点式 UI 中常见的不同类型的背景。它有三种变体：lines、dots 和 cross。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Background, BackgroundVariant } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <Background bgColor="#ccc" variant={BackgroundVariant.Dots} />
</SvelteFlow>

属性

名称	类型	默认值
#`id?`	`string`
#`class?`	`string`
#`bgColor?`	`string`
#`patternColor?`	`string`
#`patternClass?`	`string`
#`gap?`	`number \| [number, number]` 图案之间的间距。传入元组可以独立控制 x 和 y 间距。	`28`
#`size?`	`number` 如果使用 BackgroundVariant.Dots 或 BackgroundVariant.Cross，则每个圆点的半径或每个矩形的尺寸。这默认为 1 或 6，或者如果使用 BackgroundVariant.Lines 则忽略。
#`lineWidth?`	`number`	`1`
#`variant?`	`BackgroundVariant`	`BackgroundVariant.Dots`

组件类型