Tabs

The Core Component Tabs Component allows organization of content onto multiple tabs.

The Tabs Component allows the content author to organize page content within multiple tabs.

The edit dialog allows the content author to define multiple tabs as well as set the active tab. Using the design dialog, the template author can define which components can be added to tabs and customize the styles.

Edit Dialog

The edit dialog allows the content author to create, rename, and rearrange tabs as well as define the active tab.

On the Items tab, use the Add button to open the component selector to choose which component to add as a tab. Once added, an entry is added to the list, which contains the following columns:

• Icon - The icon of the component type of the tab for easy identification in the list. Mouse over to see the full component name as a tooltip.
• Description - The description used as the text of the tab, defaulting to the name of the component selected for the tab.
• Delete - Tap or click to delete the tab from the tab component.
• Rearrange - Tap or click and drag to rearrange the order of the tabs.

On the Properties tab, the following specifications are available:

• Active Item - The content author can define which tab is active when the page is loaded.
  • With the Default option, the first tab will be selected.
  • ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer.
  • If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
  • If an ID is specified, it is the responsibility of the author to make sure that it is unique.
  • Changing the ID can have an impact on CSS, JS and Data Layer tracking.

On the Accessibility tab, values can be set for ARIA accessibility labels for the component.

• Label - Value of an ARIA label attribute for the component

Select Panel

The content author can use the Select Panel option on the component toolbar to change to a different panel for editing as well as to easily rearrange the order of the tabs.

Once selecting the Select Panel option in the component toolbar, the configured tabs are displayed as a drop-down.

• The list is ordered by the assigned arrangement of the tabs and is reflected in the numbering.
• The component type of the tab is displayed first, followed by the description of the tab in lighter font.
• Tapping or clicking an entry in the dropdown, switches the view in the editor to that tab.
• The tabs can be rearranged in-place by using the drag handles.

To interact with the tabs as a user, use Preview or View as Published as Tabs are not selectable in Edit mode.