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

docs: Add additional component pages

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 0291f771fb
commit b2375bd81a
4 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/components/background.md
+29
View File
@@ -0,0 +1,29 @@
# Background
Vue Flow comes with two background pattern variants: dots and lines.
## Usage
To use the background simply pass the `Background` component as a child to the `VueFlow` component.
```vue
<template>
<VueFlow>
<Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
</VueFlow>
</template>
```
## Props
| Name | Definition | Type | Optional | Default |
|--------------|-------------------|-----------------------------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](https://types.vueflow.dev/enums/BackgroundVariant.html) | true | dots |
| gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a |
| bgColor | Is node dragging | boolean | true | #fff |
| height | Background height | number | true | 100 |
| width | Background width | number | true | 100 |
| x | X-offset | number | true | 0 |
| y | Y-offset | number | true | 0 |
docs/src/guide/components/controls.md
+34
View File
@@ -0,0 +1,34 @@
# Controls
The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
## Usage
To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
```vue
<template>
<VueFlow>
<Controls />
</VueFlow>
</template>
```
## Props
| Name | Definition | Type | Optional | Default |
|-----------------|---------------------------|-----------------------------------------------------------------------|----------|---------|
| showZoom | Show zoom btn | boolean | true | true |
| showFitView | Show fit-view btn | boolean | true | true |
| showInteractive | Show lock interactive btn | boolean | true | true |
| showZoom | Show zoom button | boolean | true | true |
| fitViewParams | Params to use on fit-view | [FitViewParams](https://types.vueflow.dev/modules.html#FitViewParams) | true | - |
## Emits
| Name | Definition |
|--------------------|-----------------------------|
| zoom-in | Zoom-in btn clicked |
| zoom-out | Zoom-out btn clicked |
| fit-view | Fit-view btn clicked |
| interaction-change | Interaction locked/unlocked |
docs/src/guide/components/minimap.md
+24
View File
@@ -0,0 +1,24 @@
# MiniMap
## Usage
To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
```vue
<template>
<VueFlow>
<MiniMap />
</VueFlow>
</template>
```
## Props
| Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 |
| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) |