Tab Control
You can use the tab control component to present learners with a series of headings, which once selected, change the text area of the component to display text or images relating to that heading.
- Tab Controls can condense a list of terms into a smaller area.
- Tab Controls isolate each term and its definition, aiding retention.
- If you need to present a list of terms which can stand alone as a piece of content, but which can also be explored in more detail, then tab controls are a great choice.
- The headings can be used to present the high-level stages in the process, which once selected, provide a more extensive explanation of what happens at that specific point.
- The headings of the tab control need to be small, typically single words.
- There can only be a few headings in a tab control — if there are more headings than room on the page, the headings will be clipped.
- The Tab Control works in half-width. However, it leaves very little room for headings.
The Tab Control component inherits all the settings common to the Presentation Components.
This is a list of the items in the tab control. When you click the Add button, a dialog will slide-out from the right side of the screen allowing you to populate the item. The fields in this dialog are:
The title of the item that appears in the tab heading as well as at the top of the text area.
The body text of the item.
The alternative text for the graphic of the item if it is provided.
Optional image which will be rendered below the body text.
A line of text to be used to supply an attribution for the original artist if required by the license of the graphic.
An optional icon to be displayed above the tab’s title. There are 53 different icons available for use (so they will not be individually detailed here).
There is no specific size required to be used in a tab control. That said, there are some general guidelines that you should follow for best results.
Smaller images will be left-aligned to the item body. This may make your tab control appear broken or less professional. Larger images will be scaled to fit within the tab control body and will maintain their aspect ratio.
The Tab Control will show the entire graphic below the text, without cropping. This can create accordion items that are extremely large and hard to navigate, particluarly on mobile or if portrait images are used.
For best results, use a narrow landscape image.
In a tab control that is full-width, the recommended image size is 938px by 270px.
In a tab control that is half-width (left or right) the recommended image size is 400px by 120px.
Again, the tab control will display an image of any height, so if you need a bit more height in the image to get your content across, Adapt will accept and display the image without issue, so long as the widths are observed.