Tabs
Overview
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
Configuring the Avonni Tabs
Data Source
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. |
Active Tab Value
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.
Make your tabs scrollable
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.
Changing the orientation
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
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
How to use Avonni Tabs?
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.
🎨 Styling
Give your Avonni Tabs component a unique look and feel with these styling options:
Size: Control the overall width and height of the Tabs component.
Background: Customize the background color of the tab container.
Border: Add a border to the tab container and customize its style.
Item: Style the individual tabs, including background color, hover effects, and selected state.
Label: Customize the text appearance of the tab labels, including font, size, and color.
Subtitle: Style any subtitles that appear below your tab labels.
Overflow Buttons: If you have many tabs, customize the appearance of the buttons that let users scroll through them
🎛️ Specification
Name | Type | Description |
---|---|---|
| String | The value of the tab to open by default. |
| Boolean | If present, allows scroll to reveal the hidden items instead of showing an overflow button menu. |
| Boolean | Changes the appearance of the tabs giving them a closed container with a defined border |
| Boolean | Choose an orientation of the tabs |
| Boolean | The text displayed in the tab |
| String | The unique value for the tab (useful to use the tabs properly) |
| Integer | Displays tooltip text when the mouse moves over the element. |
| Integer | The subtitle can include text, and is displayed under the label. |
| Integer | To add an icon on the left of the label |
| Boolean | To add an icon on the right of the label |
| Boolean | To add an icon on the top of the label |
Last updated