Node Toolbar
To enhance user interaction efficiency, you may want a floating shortcut toolbar to appear near a node (above, below, etc.) when it is selected. The yh-flow NodeToolbar component uses Vue Teleport so the toolbar stays correctly positioned at any canvas zoom level.
Node Toolbar Example
Click the node below to see the shortcut buttons above it. The demo uses v-model:nodes so selection syncs to the parent and the toolbar visibility (which depends on node.selected) works correctly.
Click Me for Tools
Floating Shortcut Toolbar
API Reference
Props
| Name | Type | Default | Description |
|---|---|---|---|
nodeId | string | Required | The ID of the parent node. |
selected | boolean | false | Whether to display the toolbar (usually bound to node.selected). |
position | string | 'top' | Relative position: top, bottom, left, right. |
offset | number | 10 | Pixel distance from the node edge. |
TIP
The toolbar supports any custom Vue slot content. We strongly recommend using the .stop modifier on your buttons' @click events to prevent the Flow engine from triggering selection or pan logic behind the toolbar.