alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(background): Allow background height/width to be set

Browse Source 
* allow for bgColor to be set
* allow for no pattern to be used
This commit is contained in:
Braks
2022-03-14 14:10:38 +01:00
parent d948f5eef4
commit 2fa7e22b5f
4 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Basic/Basic.vue
+10 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, isNode, useVueFlow, Elements } from '~/index'
const elements = ref<Elements>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -39,7 +39,15 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
:max-zoom="4"
:zoom-on-scroll="false"
>
<Background />
<Background :variant="BackgroundVariant.None" :height="33" bg-color="pink">
<text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
</Background>
<Background :height="33" bg-color="purple">
<text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 2 </text>
</Background>
<Background :height="33" bg-color="crimson">
<text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 3 </text>
</Background>
<MiniMap />
<Controls />
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">