<Controls />

The <Controls /> 组件渲染一个包含方便按钮的小面板，用于放大、缩小、适应视图和锁定视口。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Controls } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <Controls />
</SvelteFlow>

属性

对于 TypeScript 用户，<Controls /> 组件的属性类型导出为 ControlsProps。

名称	类型	默认值
#`position?`	`PanelPosition`	`"bottom-left"`
#`showZoom?`	`boolean`	`true`
#`showFitView?`	`boolean`	`true`
#`showLock?`	`boolean`	`true`
#`fitViewOptions?`	`FitViewOptions`
#`buttonBgColor?`	`string`	`undefined`
#`buttonBgColorHover?`	`string`	`undefined`
#`buttonColor?`	`string`	`undefined`
#`buttonColorHover?`	`string`	`undefined`
#`style?`	`string`	`undefined`
#`class?`	`string`	`undefined`
#`orientation?`	`"horizontal" \| "vertical"`	`"vertical"`

此外，<Controls /> 组件接受在 <div /> 元素上有效的任何属性。

备注

要扩展或自定义控件，可以使用 <ControlButton /> 组件

组件类型