docs: add horizontal layout example

2022-05-27 23:36:01 +02:00
parent b846a3f763
commit 488b632e2e
6 changed files with 92 additions and 0 deletions
@@ -0,0 +1,27 @@
+<script setup>
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { ref } from 'vue'
+import { initialElements } from './initial-elements.js'
+
+const { onConnect, addEdges } = useVueFlow()
+
+const elements = ref(initialElements)
+
+onConnect((params) => addEdges([params]))
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    class="basicflow"
+    :default-edge-options="{ type: 'smoothstep' }"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :fit-view-on-init="true"
+  >
+    <Background pattern-color="#aaa" gap="8" />
+    <MiniMap />
+    <Controls />
+  </VueFlow>
+</template>