Skip to content

Controls ​

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.

WARNING

Make sure you also import the styles as these are not part of the default theme anymore.

vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'

// import default controls styles
import '@vue-flow/controls/dist/style.css'
</script>

<template>
  <VueFlow>
    <Controls />
  </VueFlow>
</template>

Props ​

NameDefinitionTypeOptionalDefault
showZoomShow zoom btnbooleantruetrue
showFitViewShow fit-view btnbooleantruetrue
showInteractiveShow lock interactive btnbooleantruetrue
showZoomShow zoom buttonbooleantruetrue
fitViewParamsParams to use on fit-view button clickFitViewParamstrue-

Emits ​

NameDefinition
zoom-inZoom-in btn clicked
zoom-outZoom-out btn clicked
fit-viewFit-view btn clicked
interaction-changeInteraction locked/unlocked

Slots ​

Control Buttons ​

NameDefinition
topSlot above default buttons
control-zoom-inZoom-in btn
control-zoom-outZoom-out btn
control-fit-viewFit-view btn
control-interactiveInteraction btn
defaultSlot below default buttons

Icons ​

NameDefinition
icon-zoom-inZoom-in icon
icon-zoom-outZoom-out icon
icon-fit-viewFit-view icon
icon-lockInteraction locked icon
icon-unlockInteraction unlocked icon

Released under the MIT License.