49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
# Vue Flow: Additional Components
|
|
|
|
This package contains additional components that can be used with Vue Flow.
|
|
These components include:
|
|
|
|
- [Background](https://vueflow.dev/guide/components/background)
|
|
- [Controls](https://vueflow.dev/guide/components/controls)
|
|
- [ControlButton](https://vueflow.dev/guide/components/control-button)
|
|
- [MiniMap](https://vueflow.dev/guide/components/minimap)
|
|
- [MiniMap Node](https://vueflow.dev/guide/components/minimap-node)
|
|
|
|
## 🛠 Setup
|
|
|
|
```bash
|
|
# install
|
|
$ yarn add @vue-flow/additional-components
|
|
|
|
# or
|
|
$ npm i --save @vue-flow/additional-components
|
|
```
|
|
|
|
## 🎮 Quickstart
|
|
|
|
```vue
|
|
|
|
<script setup>
|
|
import { VueFlow } from '@vue-flow/core'
|
|
import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
|
|
import initialElements from './initial-elements'
|
|
|
|
// some nodes and edges
|
|
const elements = ref(initialElements)
|
|
</script>
|
|
<template>
|
|
<div style="height: 300px">
|
|
<VueFlow v-model="elements">
|
|
<!-- Adds a background to your graph. Use variant to specifiy which type of Background to use (lines, dots) -->
|
|
<Background :variant="BackgroundVariant.Dots" />
|
|
|
|
<!-- Adds zoom/interaction controls to your graph. You can add more buttons by using slots. -->
|
|
<Controls />
|
|
|
|
<!-- Adds a minimap to your graph. -->
|
|
<MiniMap />
|
|
</VueFlow>
|
|
</div>
|
|
</template>
|
|
```
|