🚀 Getting Started
How to Use in Bubble Mate
Add the Plugin to Your Bubble Project:
Include the Segmented Progress Bar plugin in your Bubble project as you would with any other custom component.

Configure Your Bubble Settings:

Bubble Settings: Set your font settings (font face, size, color, bold, italic, underline, alignment) via the bubble’s properties.

Custom Properties: You can pass in custom properties (e.g., mode, height, size, strokeWidth, borderRadius, backgroundColor, and padding) to control the visual appearance and layout.

Prepare the Segments List:
Pass a list of segment definitions using the format "color:percentage". For example:

css
Copy
["#ff0000:30", "#00ff00:40", "#0000ff:20"]
The plugin will automatically add a segment to fill up the remaining percentage if the segments do not sum to 100%.

Event Handling:

Segment Clicks: The plugin publishes details of the clicked segment (index, color, percentage) to the instance state and triggers the segment_clicked event.

Initial Rendering: Once rendered, it publishes the total segment count, selected mode, and overall progress percentage and triggers the bar_rendered event.
Use these events within Bubble Mate’s workflow editor to trigger actions based on user interaction.


Editor link: https://bubble.io/page?id=ncv-react-plugins&test_plugin=1742831344620x126096215587422200_current&tab=Design&name=Home&type=page

Demo page: https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=progress_bar