Tabs
Last updated
Last updated
The Tabs is also available as an Experience Cloud Component.
The Avonni Tabs Component helps you organize and display information on a single page. It allows you to separate information into different tabs, making it easier for users to find what they want.
Here are some of the key features of the Avonni Tabs Component:
Organizes and displays information on a single page
Separates information into different tabs
It makes it easier for users to find what they are looking for
Fully customizable
Before using the Tabs, you must decide where your tab name data will come from. The Data Source setting determines how tabs are named.
| Data Source Type | Use Case | When to Use |
|---|---|---|
For a predefined set of items that don’t require dynamic updates. | Ideal for static content or rapid setup with specific items. | |
Dynamically displaying items based on variable collections in Salesforce. | Suitable when list content reflects changing data from Salesforce records. | |
Displaying a list of options defined in a Salesforce picklist. | Best for presenting a list of predefined options for selection. |
The "Active Tab Value" setting lets you choose which tab is currently visible to the user in a tabbed interface.
To set the correct active tab:
Look at the tab you want to display.
Find the text value associated with that tab.
Enter that exact text value into the "Active Tab Value" field.
Make sure you type the text correctly, as even minor differences in spelling or capitalization will prevent the tab from being selected.
When designing tabs, you have two options:
Scrollable Tabs: Users can swipe left or right to reveal additional tabs if they don't all fit on the screen.
Scroll Buttons: Buttons appear on either side to scroll through hidden tabs, showing the number of tabs available.
Which option is right for you?
Scrollable Tabs (No Buttons): Offer a cleaner, more visually appealing look and give users more control over their navigation. Best when you have a few extra tabs that don't fit.
Scrollable Tabs with Buttons: Helpful when you have many tabs and want to make it easier for users to know how many there are and navigate between them.
The ideal choice depends on your specific design and the number of tabs you need to accommodate.
Tabs can be displayed in two ways:
Horizontal: Ideal when users expect tabs to be at the top or bottom of the screen.
Vertical: Useful when you have many tabs and want to show them all at once.
The best layout for your tabs depends on your available space and how you want your interface to look.
Interactions determine what happens when users click on a tab. Here's what you can do with the Avonni Tabs component:
On Active: Trigger an action when a tab is selected. For example, navigate to a new page, update data, or display a message.
Explore all available interactions to create a dynamic user experience.
This interactive tutorial will walk you through adding any screen flow component to its corresponding tab within the Avonni Tabs component. You'll use Flow Builder's standard "Set Component Visibility" feature to control which component is displayed in each tab.
The Avonni Tabs component offers a wide range of styling options to integrate with your design and seamlessly provide a user-friendly experience. Here's how you can customize its appearance:
Margin: Control the spacing around the Tabs component to perfectly position it within its surrounding elements.
Padding: Adjust the inner spacing within the tab container to fine-tune the layout and visual appeal.
Size: Easily modify the overall width and height of the Tabs component to fit your specific design requirements
