Appearance
背景
¥Background
Vue Flow 附带两种背景图案变体:点和线。
¥Vue Flow comes with two background pattern variants: dots and lines.
安装
¥Installation
bash
yarn add @vue-flow/background
# or
npm install @vue-flow/background
用法
¥Usage
要使用背景,只需将 Background
组件作为子组件传递给 VueFlow
组件即可。
¥To use the background simply pass the Background
component as a child to the VueFlow
component.
vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
</script>
<template>
<VueFlow>
<Background />
</VueFlow>
</template>
属性
名称 | 定义 | 类型 | 可选 | 默认 |
---|---|---|---|---|
variant | 图案变体 | BackgroundVariant | true | dots |
gap | 图案间隙 | number | true | 10 |
size | 图案大小 | number | true | 0.4 |
patternColor | 图案颜色 | string | true | #81818a |
bgColor | 背景颜色(覆盖图案) | string | true | #fff |
height | 背景高度 | number | true | 100 |
width | 背景宽度 | number | true | 100 |
x | X 偏移 | number | true | 0 |
y | Y 偏移 | number | true | 0 |