Skip to content
On this page

Controls

The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.

Installation

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.

<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'

import initialElements from './initial-elements'


// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
    <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.