Components
Background
Components
Background
Optional component for configuring the background beyond the default themes
Description
The Background component is configurable via props and can be passed to the Svelvet component as a child.
App.svelte
<script>
import { Background, Node, Svelvet } from 'svelvet';
import CustomEdge from './CustomEdge.svelte'
</script>
<Svelvet controls minimap>
<Node />
<Background dotColor="red" bgColor="black gridWidth={40} dotSize={3} slot="background" />
</Svelvet>
When passing the Background component to Svelvet, you must specify slot=“background”
Props
gridWidthDefault: "22"
number
Pixel value representing space between dots at default scale.
dotSizeDefault: "1.4"
number
Pixel value representing the size of each grid point at default scale.
bgColorDefault: "theme dependent"
CSS Color String
Primary background color.
dotColorDefault: "theme dependent"
CSS Color String
Primary dot color.