alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update component documentation

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-13 21:37:36 +01:00
parent 92ac6e2847
commit 22da724ab7
7 changed files with 182 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/src/guide/components/background.md
View File

@@ -2,6 +2,15 @@
Vue Flow comes with two background pattern variants: dots and lines.
## Installation
```bash
yarn add @vue-flow/background
# or
npm install @vue-flow/background
```
## Usage
To use the background simply pass the `Background` component as a child to the `VueFlow` component.

9
docs/src/guide/components/controls.md
View File

@@ -2,6 +2,15 @@
The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
## Installation
```bash
yarn add @vue-flow/controls
# or
npm install @vue-flow/controls
```
## Usage
To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.

9
docs/src/guide/components/minimap.md
View File

@@ -1,5 +1,14 @@
# MiniMap
## Installation
```bash
yarn add @vue-flow/minimap
# or
npm install @vue-flow/minimap
```
## Usage
To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.

70
docs/src/guide/components/node-resizer.md Normal file
View File

@@ -0,0 +1,70 @@
# Node Resizer
This is a resizer component for Vue Flow.
It can be used to resize your nodes.
## Installation
```bash
yarn add @vue-flow/node-resizer
# or
npm install @vue-flow/node-resizer
```
## Usage
```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>
```
When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.
## [Props](/typedocs/interfaces/NodeResizerProps)
| Name | Definition | Type | Optional | Default |
|-----------------|-----------------------------------------------------------|---------------|----------|----------------------|
| nodeId | Node to attach the resizer to | string | true | Node id from context |
| color | Color of the resizer lines | string | true | - |
| handleClassName | Extra class for the resize handle | string | true | - |
| handleStyle | Additional styles for the resize handle | CSSProperties | true | - |
| lineClassName | Extra class for the resize lines | number | true | - |
| lineStyle | Additional styles for the resize lines | string | true | - |
| isVisible | Force visibility of resizer | boolean | true | true |
| minWidth | Min width of the resizer (can't resize below this value) | number | true | - |
| minHeight | Min height of the resizer (can't resize below this value) | number | true | - |

84
docs/src/guide/components/node-toolbar.md Normal file
View File

@@ -0,0 +1,84 @@
# Node Toolbar
This is a toolbar component for Vue Flow.
It can be used to create a floating Toolbar next to your nodes.
You can either display the Toolbar by setting the visibility prop or automatically showing the Toolbar
on selected nodes.
## Installation
```bash
yarn add @vue-flow/node-toolbar
# or
npm install @vue-flow/node-toolbar
```
## Usage
```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 { 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>
```
## [Props](/typedocs/interfaces/NodeToolbarProps)
| Name | Definition | Type | Optional | Default |
|-----------------|---------------------------------------------------|--------------------------------------|----------|-------------------------|
| nodeId | Node(s) the toolbar is supposed to be attached to | string array | true | NodeId from context |
| isVisible | Force visibility of toolbar | boolean | true | Selected node |
| position | Toolbar position (top, left, right, bottom) | [Position](/typedocs/enums/Position) | true | Top |
| offset | Offset of toolbar position | number | true | 10 |
## Slots
| Name | Definition |
|---------|--------------------------------------|
| default | Default toolbar slot for any content |

3
packages/node-resizer/README.md
View File

@@ -1,7 +1,7 @@
# Vue Flow: Node Resizer Component
This is a resizer component for Vue Flow.
It can be used to create resize your nodes.
It can be used to resize your nodes.
## 🛠 Setup
@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/node-resizer
## 🎮 Quickstart
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'

1
packages/node-toolbar/README.md
View File

@@ -18,7 +18,6 @@ $ npm i --save @vue-flow/node-toolbar
## 🎮 Quickstart
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'