Demo to preview the plugin:
Live Demo: https://leader-line-demo.bubbleapps.io/
Introduction
This plugin allows you to create an (animated) Leader Line between 2 elements
How to setup
- Create an element Leader Line on the page
- Set Unique IDs for 2 elements you want to connect
- Create new Workflow with event Page Is Loaded and action Connect elements with a Leader Line
Fill in fields Element 1 ID and Element 2 ID with the unique IDs from the elements
- Ready. Run the page to see the result:
Plugin Element Properties
Leader Line
Element provides 2 actions and states to draw the lines
Element Actions
- Connect elements with a Leader Line
Create a line between 2 or more elements
Title | Description | Type |
Z-index Leader Line | The Z-index of the Leader Line. If you are using the Leader Line in elements with a high Z-index (like popup) you might want to increase this value (to, for example, 100000) | Number |
Element 1 ID (start) | The element ID of your ‘start’ element. If you have not enabled the option for elements to expose an element ID, you can do that by following the steps below: To set the ID for an element, you will have to enable ‘Expose the option to add an ID attribute to HTML elements’ inside Settings -> general (under general appearance). You can find the ID field at the bottom of the element’s properties. | Text (optional) |
Element 1 IDs (start) (optional) | Instead of a single start ID, you can supply a comma separated list if start IDs. NOTE: If you are using multiple start IDs and multiple end IDs, make sure the lists are the same length so the IDs match up. | Text (optional) |
Element 2 ID (end) | The element ID of your ‘end’ element. If you have not enabled the option for elements to expose an element ID, you can do that by following the steps below: To set the ID for an element, you will have to enable ‘Expose the option to add an ID attribute to HTML elements’ inside Settings -> general (under general appearance). You can find the ID field at the bottom of the element’s properties. | Text (optional) |
Element 2 IDs (end) (optional) | Instead of a single end ID, you can supply a comma separated list if end IDs. NOTE: If you are using multiple start IDs and multiple end IDs, make sure the lists are the same length so the IDs match up. | Text (optional) |
Clickable | Check the checkbox to make the line clickable. Click on the line triggers “click” event and save to a “Clicked ID” state the ID of the clicked line. | Checkbox (yes/no) |
Path type | Indicate how to draw the line Available options: straight, arc, fluid, magnet, grid | Dropdown |
Start stoke color | The start color of the gradient | Color |
End stroke color | The end color of the gradient | Color |
Start plug color | The color of the start plug | Color |
End plug color | The color of the end plug | Color |
Stroke size | The width of the stroke, in pixels | Number |
Start plug size | A multiplying factor of the size of a plug | Number |
End plug size | A multiplying factor of the size of a plug | Number |
Start plug type | Indicate type of the start plug Available options: disc, square, arrow1, arrow2, arrow3, hand, crosshair, behind | Dropdown |
End plug type | Indicate type of the end plug Available options: disc, square, arrow1, arrow2, arrow3, hand, crosshair, behind | Dropdown |
Show effect type | Animation type Available options: draw, fade, none | Dropdown |
Show effect duration | Duration in milliseconds | Number |
Start socket | Indicate which side of the element the leader line connects Available options: top, right, bottom, left, auto | Dropdown |
End socket | Indicate which side of the element the leader line connects Available options: top, right, bottom, left, auto | Dropdown |
Drop shadow color | Color of the line’s shadow | Color |
Drop shadow blur | Blur of the line’s shadow | Number |
Drop shadow X offset | Positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box | Number |
Drop shadow Y offset | A negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box | Number |
Enable dash | Draw with the dash style | Checkbox (yes/no) |
Enable dash animation | Checkbox (yes/no) | |
Dash animation duration | Duration in milliseconds | Number |
- Hide Leader Line(s) - Hide one or more lines by ID
You can hide a Leader Line using a single ID or a list of IDs (the ID is of type Number and returned as an element state).
Title | Description | Type |
Leader Line ID | When creating a line, the line ID is returned as a state of the element | Number (optional) |
Leader Line ID (list) | When creating a line, the line ID is returned as a state of the element | Number (optional) |
Hide ALL Leader Lines | When you check this box, all Leader Lines will be hidden no matter if there is an ID or a list of IDs supplied | Checkbox (yes/no) |
Hide effect type | Animation type Available options: draw, fade, none | Dropdown |
Hide effect duration | Duration in milliseconds | Number |
The “Remove Leader Line(s) from DOM” option is deprecated. | ||
Starting from 1.12.0 version the action hides with animation and deletes the Line from the DOM | ||
Remove Leader Line(s) from DOM | When checked, this will actually remove the specified Leader Lines from the DOM instead of hiding the line. Animation is not supported. For this option to work you must specify Leader lines ID(s) to remove or enable “Hide ALL Leader Lines” | Checkbox (yes/no) |
Exposed states
Title | Description | Type |
Leader Line ID | ID of the last created line | Number |
Leader Line IDs (list, when creating on ID list) | List of IDs of created lines | Number |
Clicked ID | ID of the last clicked line | Number |
Element Events
Title | Description |
Leader Line created | Triggers right after Line was created |
Clicked | Triggers when a user clicks on a line |
