<ControlButton />

你可以使用 <ControlButton /> 组件将按钮添加到控制面板，并将其作为子组件传递给 <Controls /> 组件。

¥You can add buttons to the control panel by using the <ControlButton /> component and pass it as a child to the <Controls /> component.


import { MagicWand } from '@radix-ui/react-icons'
import { ReactFlow, Controls, ControlButton } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls>
        <ControlButton onClick={() => alert('Something magical just happened. ✨')}>
          <MagicWand />
        </ControlButton>
      </Controls>
    </ReactFlow>
  )
}

属性

¥Props

<ControlButton /> 组件接受 HTML <button /> 元素上有效的任何 prop。

¥The <ControlButton /> component accepts any prop valid on a HTML <button /> element.

Name	Type	Default
`...props`	`ButtonHTMLAttributes<HTMLButtonElement>`