Tokyo - Components | Tab group

Last modified: 3 years ago

"Tab group" is a component that groups the content in a tab menu that we can explore.
This component is added within the screens by default. (See here), it can also be added inside a row or a pop-up.
You will find this component in the group of "Cataloguer" components.

When creating the "Accordion" component, three "Tabs" https://netexlearning.atlassian.net/wiki/download/thumbnails/686163442/worddav75893a9adcd5eb15ad58b008babc7c73.png?version=1&modificationDate=1545917948984&cacheVersion=1&api=v2&width=25&height=23 1x" data-image="7oecyn0y58ea"> are included by default. Each "Tab" is organised in two areas:

A title.
A content area including a sample text. This area allows including new components within.

This component has a complex structure, as it consists of many elements having their own specific properties. In order to configure it correctly, we should pay attention and select the right element. We can select elements from the breadcrumb trail and from the "Structure" tab.

Breadcrumb trail	"Structure" tab

Setup process

1. When creating this component, three elements are included by default. Go to "Add" and include the "Tabs" we need.

2. Go to the "Properties" tab and configure the parameters for the Tab Group.

3. Write a title for each "Tab".

4. Select the content area within the "Tab" and add your own content. A sample text is added by default, but we can add the components we prefer to the "Add" tab.

Properties

PROPERTY	DESCRIPTION
	It offers two views of the tabs: *Classic:* shows the activated label in a more marked color tone: *With border:* shows the activated label with a border:
*Style*	This property allows modifying the graphic layout of a tab group: *Standard: primary and secondary colours can be applied to the unit, when appropriate to the chosen view (See here* to learn how to configure the colours). *Customised: customised colours can be applied to the accordion. Depending on the selected "View"*, new properties will be enabled to let you modify border, background and title colours.
*Width*	This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default, but size can be reduced to other preset percentages or changed to "full-size". Some quote styles may overlap the central column if "Full" width is chosen.
*Align*	This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied *"Width"* is less than 100%.
*Overcome goal*	It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: *Inherited:* this option aply the default value defined in the Completion Objectives Area (See here). *Non objetive:* this audio will not an objetive to complete the unit. *Interact:* It is necessary interact with the component to reach the objective. Complete: it is necessary to visit all the tabs to overcome the goal.