REA Advanced Tabs

With REA Advanced Tabs widget, you can display a substantial amount of information in an aesthetic and organized way under different tabs.

Content

General Settings

1. Layout: Select the preferred layout you want to display the content in.

2. Enable Icon: Check this if you want to display icons next to the tab title.

3. Icon Position: Choose "Inline" to display the icon in the same line as the title or "Stacked" to display both on separate lines.

Content

From the content tab, you can add more tabs and add separate content for each of them. The repeater controls are as follows:

1. Set as Default: This control will set that specific tab as the first tab that shows when the page is loaded.

2. Icon Type: Gives you the option to show no icon, display an icon or display an image instead.

3. Tab Title: Change the title of the tab from here.

4. Content Type: Choose "Content" to input your own custom content or "Saved Templates" to choose the content of a template.

5. Choose Template: If you select "Saved Templates" then select the template you want to display the content of from this control.

Style

General

You can change various properties of the entire widget container such as padding and margin. You can also add a border and give it rounded corners. Add a box shadow to give it a cool effect.

Tab Title

• Apart from changing properties such as margin and padding of the tab title container, you can also set a minimum width to it.

• Adjust the icon size and typography for text separately along with controlling the space between the icon and the title.

• Change the background color, text and icon color of the title / title container for three different states, that is, normal, hover and active state.

• Also add a border and customize it with various options such as color, size and radius.

Content

• Change the background color of the content tab along with adjusting properties for the text within it such as typography and color.

• Adjust the margin padding as well as add a border with various options available to style it.

Caret

Display the tiny arrow next to the active tab. Adjust its size and color if you choose to display it.

Responsive Controls

If checked, for smaller screen sizes, horizontal layout will automatically switch to vertical layout to display the tabs without breaking or looking weird.