vue-flow/docs/src/guide/components/controls.md

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