Skip to content
On this page

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

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

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 btns
control-zoom-inZoom-in btn
control-zoom-outZoom-out btn
control-fit-viewFit-view btn
control-interactionInteraction btn
defaultslot below default btns

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.