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.
<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 | 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 |
Slots
Control Buttons
| Name | Definition |
|---|---|
| top | slot above default btns |
| control-zoom-in | Zoom-in btn |
| control-zoom-out | Zoom-out btn |
| control-fit-view | Fit-view btn |
| control-interaction | Interaction btn |
| default | slot below default btns |
Icons
| Name | Definition |
|---|---|
| icon-zoom-in | Zoom-in icon |
| icon-zoom-out | Zoom-out icon |
| icon-fit-view | Fit-view icon |
| icon-lock | Interaction locked icon |
| icon-unlock | Interaction unlocked icon |