<Controls />

<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?`	`"水平" \| "垂直"`	`"vertical"`

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

注意事項

若要擴充或自訂控制項，您可以使用 <ControlButton /> 元件

元件類型