<NodeToolbar />
NodeToolbarコンポーネントは、ノードの側面にツールバーを表示したり、ツールチップなどを表示するために使用できます。
CustomNode.svelte
<script lang="ts">
import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
type $$Props = NodeProps;
export let data: $$Props['data'];
</script>
<NodeToolbar>
<button>delete</button>
<button>copy</button>
<button>expand</button>
</NodeToolbar>
<div class="node">
<div>{data.label}</div>
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
</div>プロパティ
| 名前 | 型 |
|---|---|
# nodeId? | string| string[] |
# position? | Position |
# align? | Align |
# offset? | number |
# isVisible? | number |
注意事項
- デフォルトでは、ツールバーはノードが選択されている場合にのみ表示されます。 複数のノードが選択されている場合、ツールバーの重複や乱雑さを防ぐため、表示されません。 この動作は、
isVisibleプロパティをtrueに設定することでオーバーライドできます。