30 lines
1.8 KiB
Markdown
30 lines
1.8 KiB
Markdown
# 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.
|
|
|
|
```vue
|
|
<template>
|
|
<VueFlow>
|
|
<Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
|
|
</VueFlow>
|
|
</template>
|
|
```
|
|
|
|
## Props
|
|
|
|
| Name | Definition | Type | Optional | Default |
|
|
|--------------|-------------------|-----------------------------------------------------------------------------|----------|---------|
|
|
| variant | Pattern variant | [BackgroundVariant](https://types.vueflow.dev/enums/BackgroundVariant.html) | 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 |
|