<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 />コンポーネントのプロパティ型はPanelPropsとしてエクスポートされます。

名前	型
#`position`	`PanelPosition`
#`children`	`React.ReactNode`

さらに、<Panel />コンポーネントは、HTMLの<div />要素のすべてのプロパティを受け入れます。

コンポーネント型