<Controls />
The <Controls />
component renders a small panel that contain convenient
buttons to zoom in, zoom out, fit the view, and lock the viewport.
<script lang="ts">
import { SvelteFlow, Controls } from '@xyflow/svelte';
let nodes = $state.raw([]);
let edges = $state.raw([]);
</script>
<SvelteFlow bind:nodes bind:edges>
<Controls />
</SvelteFlow>
Props
The type for props of <Controls />
component is exported as ControlsProps
.
Additionally, it extends the props of <div />
.
Name | Type | Default |
---|---|---|
position | PanelPosition Position of the controls on the pane | |
showZoom | boolean Show button for zoom in/out | |
showFitView | boolean Show button for fit view | |
showLock | boolean Show button for toggling interactivity | |
buttonBgColor | string | |
buttonBgColorHover | string | |
buttonColor | string | |
buttonColorHover | string | |
buttonBorderColor | string | |
orientation | "horizontal" | "vertical" | |
before | Snippet<[]> | |
after | Snippet<[]> | |
fitViewOptions | FitViewOptions | |
...props | HTMLAttributes<HTMLDivElement> |
Notes
- To extend or customize the controls, you can use the
<ControlButton />
component
Last updated on