REA Advanced Tabs
Last updated
Last updated
With REA Advanced Tabs widget, you can display a substantial amount of information in an aesthetic and organized way under different tabs.
Layout: Select the preferred layout you want to display the content in.
Enable Icon: Check this if you want to display icons next to the tab title.
Icon Position: Choose "Inline" to display the icon in the same line as the title or "Stacked" to display both on separate lines.
From the content tab, you can add more tabs and add separate content for each of them. The repeater controls are as follows:
Set as Default: This control will set that specific tab as the first tab that shows when the page is loaded.
Icon Type: Gives you the option to show no icon, display an icon or display an image instead.
Tab Title: Change the title of the tab from here.
Content Type: Choose "Content" to input your own custom content or "Saved Templates" to choose the content of a template.
Choose Template: If you select "Saved Templates" then select the template you want to display the content of from this control.
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.
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.
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.
Display the tiny arrow next to the active tab. Adjust its size and color if you choose to display it.
If checked, for smaller screen sizes, horizontal layout will automatically switch to vertical layout to display the tabs without breaking or looking weird.
