@vue-flow/monorepo • Docs

---

Interface: BackgroundProps

Properties

color?

optional color: string

The background pattern color

This only changes the color of the pattern, not the background color itself.

If you want to change the background color itself, you can apply a bg-color to the <VueFlow> element instead

---

gap?

optional gap: number | number[]

The background pattern gap

Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively

Default

20

---

id?

optional id: string

<Background> component id

This is necessary when you have multiple flows with backgrounds visible at the same time. If no id is explicitly assigned, an auto-generated one is used.

Default

pattern-${vueFlowId}${id ? -${id} : ''}

---

lineWidth?

optional lineWidth: number

Default

1

---

offset?

optional offset: number | [number, number]

Background pattern offset

Default

0

---

size?

optional size: number

Background pattern size

Default

1

---

variant?

optional variant: BackgroundVariant

The background pattern variant BackgroundVariant

Default

'dots'

---

x?

optional x: number

Background x-coordinate (offset x)

Default

0

---

y?

optional y: number

Background y-coordinate (offset y)

Default

0