Demo to preview the plugin:
Live Demo: https://rapidevplugins3.bubbleapps.io/marker
Introduction
This plugin allows you to dynamically underline text using colored lines.
You can set the color, the duration of the animation, the thickness of the lines and if the lines should be striped.
You can use this plugin to draw the user’s attention to a specific portion of text.
On smaller mobile screens, when selected text wraps to a new line, the underline does not follow the text correctly. This mirrors the same visual issue seen in the Web version. The underline effect is not strictly bound to the selected text. Instead, it overextends and spills into the background area of the container below the text.
How to setup
Plugin Element Properties - Marker
The plugin contains a visual Marker element that should be used on a page.
Fields
Title | Description | Type |
Element ID | Specify the element id of the text that should be underlined. | Text |
Color | Choose the color of the line | Color |
Duration | Choose the duration of the animation Available options: 1s, 2s, 3s, 4s, 5s, 6s | Text |
Enable Stripes | Choose if the lines should be striped. | Checkbox (yes/no) |
Thickness | Choose the thickness of the lines. Available options: 0.1em, 0.2em, 0.3em, 0.4em, 0.5em, 0.6em, 0.7em, 0.8em | Dropdown |
Workflow example
Here’s an example of how you might use the Underline Text (Marker) plugin:
- Setup the Element:
- Add a Text element to your page and set it an id
- Add the Marker element to your page
- Set the ID of the Text element into the Marker Element ID Field
- Configure the rest of the fields of the marker
