Progress Popover

The Avonni Progress Popover displays a series of steps, each with a popover containing progress indicators and contextual information.

Changing the properties

Adding steps

To add a step, go to the Data Source section to add your steps.

Data source

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 ⬇️

Step information

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.

Button information

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.

Adding Interactions

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.

Last updated 6 months ago

Was this helpful?