Tabs

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.

The Tabs is also available as an Experience Cloud Component.

---

Configuring the 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.

Manual

For a predefined set of items that don’t require dynamic updates.

Variable

Great when your table data is linked to variable collections in your flow.

Query

Perfect for tables reflecting dynamically changing data or real-time updates.

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:

1. Look at the tab you want to display.

2. Find the text value associated with that tab.

3. 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.

Horizontal vs Vertical Tabs

---

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

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:

Layout and Spacing

• 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

Visual Appearance

• Background: Personalize the background color of the tab container to match your application's color scheme.

• Border: Add a border to enhance the visual definition of the tab container. You can customize the border's style (solid, dashed, etc.), color, and thickness.

• Item: Style each tab to create a distinct look. This includes options for:

  • Background color: Set different background colors for tabs in various states (e.g., active, hover).

  • Hover effects: Provide visual feedback to users by adding hover effects like background color changes or underlines.

  • Selected state: Indicate the currently active tab with a distinct style

Text and Labels

• Item Label: Customize the appearance of the text within each tab label. You can adjust the:

  • Font: Choose a font that aligns with your overall design.

  • Size: Control the font size for optimal readability.

  • Color: Set the color of the tab labels to ensure clear visibility.

• Item Subtitle: If you're using subtitles beneath your tab labels, you can style these independently to provide additional information or context

Navigation for Many Tabs

Overflow Buttons: When you have many tabs that exceed the available space, Avonni provides overflow buttons to enable scrolling. You can customize the appearance of these buttons to blend with your design seamlessly

---