<Panel />

<Panel /> 元件可協助您將內容定位在視窗上方。它在內部被 <MiniMap /> 和 <Controls /> 元件使用。

import { ReactFlow, Background, 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>
    </ReactFlow>
  );
}

屬性

對於 TypeScript 使用者，<Panel /> 元件的 props 型別會匯出為 PanelProps。

名稱	型別
#`position`	`PanelPosition`
#`children`	`React.ReactNode`

此外，<Panel /> 元件接受 HTML <div /> 元素的所有 props。

元件型別