<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? | 字符串| 字符串[] |
# position? | Position |
# align? | 对齐 |
# offset? | 数字 |
# isVisible? | 数字 |
备注
- 默认情况下，工具栏仅在节点被选中时可见。如果选中了多个节点，它将不可见，以防止工具栏重叠或混乱。可以通过将
isVisible属性设置为true来覆盖此行为。