<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?`	`"horizontal" \| "vertical"`	`"vertical"`

さらに、<Controls /> コンポーネントは、<div /> 要素で有効な任意のプロパティを受け入れます。

注釈

コントロールを拡張またはカスタマイズするには、<ControlButton /> コンポーネントを使用できます

コンポーネント型