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.

Popover information

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.

Popover set as a 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.

---

Styling the Progress Popover

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.

Layout and Spacing

• 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

Step Content Styling

• Bar: Customize the appearance of the progress bar that connects the steps. You can modify:

  • Bar color: Set the color of the line connecting the steps.

  • Background color: Set a background color for the progress bar.

• Label: Style the label text that identifies each step in the process. Adjust the font, size, color, and weight.

• Description: If you include a more detailed description within each step, you can customize its text properties (font, size, color) to provide clear and concise instructions.

• Icon: Customize the appearance of any icons used within the steps of the Progress Popover, including their size, color, and background

Popover Styling

Popover: Style the overall appearance of the popover container itself. This includes options for background color, border, shadow, and more

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.