1.6 KiB
1.6 KiB
Background
Vue Flow comes with two background pattern variants: dots and lines.
Usage
To use the background simply pass the Background component as a child to the VueFlow component.
<template>
<VueFlow>
<Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
</VueFlow>
</template>
Props
| Name | Definition | Type | Optional | Default |
|---|---|---|---|---|
| variant | Pattern variant | BackgroundVariant | true | dots |
| gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a |
| bgColor | Is node dragging | boolean | true | #fff |
| height | Background height | number | true | 100 |
| width | Background width | number | true | 100 |
| x | X-offset | number | true | 0 |
| y | Y-offset | number | true | 0 |