<Panel />

<Panel /> 组件帮助你将内容定位在视口上方。它在内部被 <MiniMap /> 和 <Controls /> 组件使用。

🌐 The <Panel /> component helps you position content above the viewport. It is used internally by the <MiniMap /> and <Controls /> components.


import { ReactFlow, Panel } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} fitView>
      <Panel position="top-left">top-left</Panel>
      <Panel position="top-center">top-center</Panel>
      <Panel position="top-right">top-right</Panel>
      <Panel position="bottom-left">bottom-left</Panel>
      <Panel position="bottom-center">bottom-center</Panel>
      <Panel position="bottom-right">bottom-right</Panel>
      <Panel position="center-left">center-left</Panel>
      <Panel position="center-right">center-right</Panel>
    </ReactFlow>
  );
}

属性

🌐 Props

对于 TypeScript 用户，<Panel /> 组件的 props 类型导出为 PanelProps。此外，<Panel /> 组件接受 HTML <div /> 元素的所有 props。

🌐 For TypeScript users, the props type for the <Panel /> component is exported as PanelProps. Additionally, the <Panel /> component accepts all props of the HTML <div /> element.

Name	Type	Default
`position`	`PanelPosition` The position of the panel.	`"top-left"`
`...props`	`DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>`