<NodeToolbar />
このコンポーネントは、カスタムノードの片側にツールバーまたはツールチップをレンダリングできます。このツールバーはビューポートに合わせてスケール変更されないため、コンテンツは常に表示されます。
import { memo } from 'react';
import { Handle, Position, NodeToolbar } from '@xyflow/react';
export CustomNode = ({ data }) => {
return (
<>
<NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition}>
<button>delete</button>
<button>copy</button>
<button>expand</button>
</NodeToolbar>
<div style={{ padding: '10px 20px' }}>
{data.label}
</div>
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
</>
);
};
export default memo(CustomNode);プロパティ
TypeScript ユーザーの場合、<NodeToolbar /> コンポーネントのプロパティ型は `NodeToolbarProps` としてエクスポートされます。
| 名前 | 型 | デフォルト値 |
|---|---|---|
# nodeId? | 文字列 | 文字列[]ノードIDの配列を渡すことで、ノードのグループまたはコレクションに対して単一のツールチップをレンダリングできます。 | |
# isVisible? | ブール値 | |
# position? | Position | |
# offset? | 数値ノードとツールバーの間のスペース（ピクセル単位）。 | |
# align? | "中央" | "開始" | "終了" | |
備考
- デフォルトでは、ツールバーはノードが選択されている場合のみ表示されます。複数のノードが選択されている場合、ツールバーの重複またはごちゃごちゃを防ぐために表示されません。`isVisible` プロパティを `true` に設定することで、この動作を上書きできます。