chore(node-resizer): add README

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-10 10:54:49 +01:00
committed by Braks
parent 3fc1b39ce2
commit c5c60b8894
2 changed files with 55 additions and 4 deletions

View File

@@ -1,3 +1,55 @@
# Vue Flow: Toolbar Component
# Vue Flow: Node Resizer Component
This is a toolbar component for Vue Flow.
This is a resizer component for Vue Flow.
It can be used to create resize your nodes.
## 🛠 Setup
```bash
# install
$ yarn add @vue-flow/node-resizer
# or
$ npm i --save @vue-flow/node-resizer
```
## 🎮 Quickstart
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'
// some nodes and edges
const elements = ref(initialElements)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init>
<template #node-custom="nodeProps">
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
</template>
</VueFlow>
</template>
```
```vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'
// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'
defineProps(['label'])
</script>
<template>
<NodeResizer min-width="100" min-height="30" />
<Handle type="target" :position="Position.Left" />
<div style="padding: 10px">{{ label }}</div>
<Handle type="source" :position="Position.Right" />
</template>
```

View File

@@ -21,7 +21,6 @@ $ npm i --save @vue-flow/node-toolbar
<script setup>
import { VueFlow } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'
import initialElements from './initial-elements'
// some nodes and edges
@@ -29,7 +28,7 @@ const elements = ref(initialElements)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
<VueFlow v-model="elements" fit-view-on-init>
<template #node-custom="nodeProps">
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
</template>