Progress Popover
Last updated
Last updated
The Progress Popover component displays a series of steps that can show a popover with additional content information. It typically consists of a popover window containing a progress bar or circle, along with a label or title providing context for the progress. Actions can be performed in a step. The Progress Popover component is often used to provide visual feedback to the user on the status of a task or process compactly and visually.
To add a step, go to the Data Source section to add your steps.
Adding steps is possible using the Data Source section. Steps can be added:
Manual: To add steps by hand, fill out the required address information.
Variable: You can dynamically add 'Steps' by connecting them to a data collection from your flow. You'll need to map the data once linked to a variable data source.
Tips and Tricks: Using the Avonni New Progress Popover Step Collection action
Among the Avonni Actions available, the Avonni New Progress Popover Step Collection is a great way to define steps as a variable. Once specified, this variable can be applied wherever you use the progress popover component within your flow. The advantage is that you no longer need to manage step values individually for each instance of a progress popover component.
Watch the tutorial below ⬇️
Enter any valuable information under the Step section to configure information that needs to be displayed.
If you want to display a popover, enter any valuable information under the Popover section to configure the information that needs to be displayed in the popover.
Popover can be configured as a button by setting the Variant to Button.
If you want to display a button, enter any valuable information under the Button section to configure the information that needs to be displayed in the popover.
Interactions define what happens when users interact with the Progress Popover component. A list of interactions is available here.
Here are the available interactions for the List component:
On Step Click: The event is fired when a user clicks on a step.
On Step Button Click: The event is fired when a user clicks on a button.
On Step Popover Click: The event is fired when a user clicks on a popover window.
Progress Popovers are an effective way to guide users through a multi-step process. They visually represent progress and offer helpful information at each stage. Avonni allows you to customize the styling of your Progress Popovers for a seamless fit within your application.
Margin: Control the spacing around the entire Progress Popover element, ensuring it's well-positioned within its surrounding content.
Padding: Adjust the inner spacing within the Popover to fine-tune the layout and readability of its content.
Border: Add a border around the Popover to provide visual definition. You can customize the border's style, color, and thickness
Further Styling Guidance
For detailed instructions, code examples, and advanced styling techniques, refer to the official Avonni documentation (link to documentation here).
By taking advantage of these styling options, you can create Progress Popovers that are informative and user-friendly and visually consistent with your application's design, providing a polished and professional look.
