<Controls />

GitHub 源码

The <Controls /> component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

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

属性

对于 TypeScript 用户，<Controls /> 组件的属性类型导出为 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 /> 元素上有效的任何属性。

备注

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

组件类型