<Controls />

<Controls /> コンポーネントは、ズームイン、ズームアウト、ビューのフィット、およびビューポートのロックのための便利なボタンを含む小さなパネルをレンダリングします。

import { ReactFlow,  Controls } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls />
    </ReactFlow>
  )
}

Props

TypeScript ユーザーの場合、<Controls /> コンポーネントの props 型は ControlsProps としてエクスポートされます。

名前	型	デフォルト
#`showZoom?`	`boolean` ズームインとズームアウトのボタンを表示するかどうか。これらのボタンは、押すたびにビューポートのズームを一定量調整します。	`true`
#`showFitView?`	`boolean` フィットビューボタンを表示するかどうか。デフォルトでは、このボタンは、すべてのノードが一度に表示されるようにビューポートを調整します。	`true`
#`showInteractive?`	`boolean`	`true`
#`fitViewOptions?`	`FitViewOptions` フィットビューボタンのオプションをカスタマイズします。これらは、fitView 関数に渡すのと同じオプションです。
#`onZoomIn?`	`() => void` ズームインボタンがクリックされたときに、デフォルトのズーム動作に加えて呼び出されます。
#`onZoomOut?`	`() => void` ズームアウトボタンがクリックされたときに、デフォルトのズーム動作に加えて呼び出されます。
#`onFitView?`	`() => void` フィットビューボタンがクリックされたときに呼び出されます。これが提供されない場合、すべてのノードが表示されるようにビューポートが調整されます。
#`onInteractiveChange?`	`(interactiveStatus: boolean) => void` インタラクティブ（ロック）ボタンがクリックされたときに呼び出されます。
#`position?`	`PanelPosition`	`"bottom-left"`
#`ariaLabel?`	`string`	`"React Flow controls"`
#`orientation?`	`"horizontal" \| "vertical"`	`"vertical"`

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

注記

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

コンポーネント型