<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來覆寫此行為。