<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 /> 元素上任何有效的 prop。

注意事項

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

元件類型