<Background />

Source on GitHub

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.


<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>

Props

Name	Type	Default
#`id?`	`string`
#`class?`	`string`
#`bgColor?`	`string`
#`patternColor?`	`string`
#`patternClass?`	`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.
#`lineWidth?`	`number`	`1`
#`variant?`	`BackgroundVariant`	`BackgroundVariant.Dots`