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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
Understanding the fundamental difference between the and components is essential, as they serve distinct purposes.
: 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.
: 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
These are the minimum steps required to get a functional Tabbed Container working:
Drag a Tabbed Container component onto the canvas.
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
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.
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).
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.
