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.

Key Difference with the Tabs Component

Understanding the difference between the Avonni Tabs and Tabbed Container components is essential, as they serve distinct purposes.

• Avonni Tabs: This component is designed to create tabs dynamically based on a data source. You connect it to a data source (like a list of records, a picklist, or manually entered values), and the component automatically generates a tab for each item in that data source. You cannot drag and drop other Avonni components inside the tabs. Think of it as a data-driven navigation element.

• Tabbed Container: This component is a layout container. It allows you to create a tabbed structure, and then manually add and arrange any Avonni components within the content area of each tab. You have complete freedom to design the layout and content of each tab independently. It's about structuring your UI and organizing other components.

Use the Avonni Tabs component to create tabs based on a list of records or options. Use the Tabbed Container component when creating a tabbed layout with arbitrary components within each tab.

Setting Up Your Tabs

1. Configure the Data Source

Before your Tabs can display any content, you must tell it where to get the data. The Avonni Tabs component offers flexible options to connect to different data sources, depending on your needs and how you want to manage the tab's content.

Choose how to populate your tab names:

2. Set the Active Tab

When your Tabs component first loads, you'll want to ensure the correct tab is displayed to the user. This is controlled by the "Active Tab Value" setting.

• Understanding Tab Values: Each tab in your component is associated with a specific value, usually the same as the tab's label. This value acts as an identifier for the tab.

• Setting the Default: To choose which tab should be active initially, enter its corresponding value into the "Active Tab Value" field.

  • Example: If you have a tab labeled "Details," and you want it to be the first tab users see, you would enter "Details" into the "Active Tab Value" field.

Important Note

It's crucial to enter the tab value exactly as it appears in your tab configuration. Even small differences in spelling or capitalization can prevent the tab from being selected correctly.

3. Configure Scrolling (Optional)

If you have many tabs that don't all fit on the screen at once, you can enable scrolling to allow users to access all the tabs. Avonni provides two scrolling options:

• Scrollable Tabs: This option allows users to swipe left or right on the tabs to reveal additional tabs that are hidden off-screen. This provides a seamless and intuitive way to navigate between tabs, especially on touch devices.

• Scroll Buttons: If you prefer a more explicit way to scroll through tabs, you can enable scroll buttons. This will display buttons on either side of the tab bar that users can click to scroll through the tabs. This option also shows the total number of tabs, which can help users understand the scope of the content.

The choice between scrollable tabs and scroll buttons depends on your design preferences and the number of tabs you have. Scrollable tabs offer a cleaner look and feel, while scroll buttons provide more explicit controls and information about the number of tabs.

4. Change the Orientation

The Avonni Tabs component offers flexibility in how you arrange your tabs. You can choose between two orientations:

• Horizontal: This is the most common orientation for tabs, where they are arranged horizontally across the top or bottom of the section. This layout is ideal when you have a limited number of tabs or want to maintain a clear visual hierarchy with the content below the tabs.

• Vertical: In this orientation, the tabs are arranged vertically, typically on the left or right side of the section. This layout is suitable when you have many tabs or want to maximize the horizontal space available for your content.

The choice between horizontal and vertical orientation depends on your design preferences, the number of tabs you have, and the overall layout of your page.

5. Define Interactions

Interactions allow you to add dynamic behavior to your tabs, making them more than static navigation elements.

• On Tab Click: This interaction lets you define what happens when a user clicks on a tab to make it active. You can choose from a variety of actions, such as:

  • Navigation: Navigate to a different page or section within your application.

  • Display Messages: Show a toast message or open a modal dialog to provide feedback or information to the user.

  • And more: Explore the full range of available interactions to create a dynamic and engaging user experience

Styling

The Avonni Tabs component offers a wide range of styling options to integrate with your design and provide a user-friendly experience. You can customize colors, fonts, borders, spacing, and more to match your branding and preferences.