Tabbed Container

The Tabbed Container is a layout component that creates a tabbed interface. Each tab acts as a container, meaning you can place any other Avonni components inside it.

Key Difference with the Tabs Component

Understanding the fundamental 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 Tabbed Container

These are the minimum steps required to get a functional Tabbed Container working:

Add the Tabbed Container

Drag a Tabbed Container component onto the canvas.

Add Tabs (Items)

• In the Properties Panel, find the Items property. Click the button/link to open the Items editor.

• Click "Add Items" to add a new tab. Add at least two tabs to see the tabbing functionality.

• For each tab:

  • Label: Enter the text you want displayed on the tab itself (e.g., "Details," "Contacts").

  • Value: Enter a unique value for the tab (e.g., "details," "contacts"). Avoid spaces or special characters. This value is used for programmatic access (e.g., setting the active tab).

  • Icon Name: The name of an Avonni icon (or a Salesforce SLDS icon) to display on the tab. This adds a visual cue to the tab. Example: utility:info, standard:account.

  • Icon Position: Where to display the icon. Possible value are Top, left or right.

  • Tooltip: A short text description that appears when the user hovers their mouse cursor over the tab. Use tooltips to provide additional context or instructions.

  • Subtitle: Text will be displayed below the main tab label. This can be used to provide a secondary line of information or a brief description of the tab's content

Add Content to Tabs

• Select the Tabbed Container component on the canvas.

• Click on a tab in the preview to select that tab's content area.

• Drag and drop other Avonni components from the Component Library into the selected tab's content area. This is what makes the Tabbed Container so powerful.

That's it! At this point, you should have a working Tabbed Container with multiple tabs, and you can switch between the tabs to see the different content areas. You must add content to each tab to see it correctly.

Additional Configuration Options

These settings provide further customization and control over the Tabbed Container's appearance and behavior:

• Active Item Value: The Value of the currently selected tab. You can bind this to a Variable resource to control which tab is active programmatically and to react to tab changes.

• Scrollable: Enable this if you have many tabs that might not fit within the available width (horizontal orientation) or height (vertical orientation).

• Show Scroll Buttons: If Scrollable is enabled, this controls whether explicit scroll buttons (arrows) are displayed.

• Scoped: If enabled, visually groups the tabs.

• Orientation:

  • Horizontal (default): Tabs are displayed across the top.

  • Vertical: Tabs are displayed along the side (usually the left).

Tab Selection (Active Item Value)

The Active Item Value property controls which tab is selected. Set it to the Value of the desired tab. You can set a default value directly.