chore(node-resizer): add README
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -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>
|
||||||
|
```
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ $ npm i --save @vue-flow/node-toolbar
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { VueFlow } from '@vue-flow/core'
|
import { VueFlow } from '@vue-flow/core'
|
||||||
import { NodeToolbar } from '@vue-flow/node-toolbar'
|
|
||||||
import initialElements from './initial-elements'
|
import initialElements from './initial-elements'
|
||||||
|
|
||||||
// some nodes and edges
|
// some nodes and edges
|
||||||
@@ -29,7 +28,7 @@ const elements = ref(initialElements)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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">
|
<template #node-custom="nodeProps">
|
||||||
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
|
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user