<Background />
Source on GitHub (opens in a new tab)
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. | |
# size? | numberThe 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 | |
# variant? | |