ReferenceComponents
<Background />

<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

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