feat(examples): add node-toolbar example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2022-12-09 20:52:01 +01:00
parent f6acbd8dc6
commit 196215d9e2
5 changed files with 130 additions and 10 deletions
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+
+interface NodeData {
+  toolbarVisible: boolean
+  toolbarPosition: Position
+}
+
+interface Props {
+  data: NodeData
+  label: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
+    <button>delete</button>
+    <button>copy</button>
+    <button>expand</button>
+  </NodeToolbar>
+
+  <div :style="{ padding: '10px 20px' }">
+    {{ label }}
+  </div>
+
+  <Handle type="target" :position="Position.Left" />
+  <Handle type="source" :position="Position.Right" />
+</template>