Tabs

What is a tab? A tab is the element of a user interface that allows navigating between multiple subjects on a page. 

Break content into multiple well-structured tabs that can be folded and unfolded when it is necessary making the appearance classy-looking and neat.

Add Tabs to the page

Firstly, find the Tabs control in the controls add panel,. Then, drag and drop it into a section or container on your page.

Set content of Tabs

Move on to the Basic section. 3 default tabs are added by default. You are able to add or remove tabs and this will affect the number of tabs. If you need to add more tabs, just click the "+ Add another tab" button at the bottom of the tab list.  

Click each tab to expand setting section. Type in the tab title in the Text option. Set the icons or images of each tab or select none to just display the text. 

Settings of Tabs control

Tabs Position: Choose the position where the tab header display. You can select top, left, right and button.

Default: Set the default active tab from the existing tabs.

Appearance

Dynamic Display Rules

When you set a dynamic display rule for this tabs set, It behaves differently based on specific conditions and rules. There are Two actions(Hide/Show) for it. 

Learn how to create dynamic display rules for a control.

Styling the Tabs control

General

1. Background type: Select the Tabs control's background color. You may use a solid or gradient color.
2. Margin: Set the Margin of the Tabs control in PX or %.
3. Padding: Set the Padding of the Tabs control in PX or %.
4. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
5. Radius: Set the border radius to control corner roundness.
6. Shadow: Adjust box shadow options

Tabs Control

Here is the place to set the styles of the tabs container. 

1. Background type: Select the Tabs container's background color. You may use a solid or gradient color.
2. Tabs Container Alignment: Set the alignment of the tabs container from Left, Center, Right and Justify.

   

3. Tabs Alignment: Set the alignment of the tabs from Left, Center, Right and Justify. This most time only effect when the Tabs container alignment is set as Justify.

   

4. Margin: Set the Margin of the Tabs container in PX or %.
5. Padding: Set the Padding of the Tabs container in PX or %.
6. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
7. Radius: Set the border radius to control corner roundness.
8. Shadow: Adjust box shadow options

Tabs Control Item

Here is the place to set the styles of each tab item

1. Icon Margin: If the tab item include icon, set the Margin of the icon in PX or %.
2. Image Margin: If the tab item include image, set the Margin of the image in PX or %.
3. Image Width: If the tab item include image, set the size of the image in PX or %.
4. Position: If the tab item include icon or image, choose the position where the icon/image display. You can select top, left, right.

   

5. State Style: Set styles for different state of each tab item: Normal, Hover, Active.
6. Text Color: Choose the color of the tab's text.
7. Typography: Set the typography options for the tab's text.
8. Icon Color: Choose the color of the tab's icon.
9. Icon Size: Set the size of the tab's icon.
10. Background Type: Select the tab item’s background color. You may use a solid or gradient color.
11. Margin: Set the Margin of the Tab items in PX or %.
12. Padding: Set the Padding of the Tab items in PX or %.
13. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
14. Radius: Set the border radius to control corner roundness.
15. Shadow: Adjust box shadow options

Tabs Content

Here is the place to set the styles of the content container for each tab item.

1. Background Type: Select the background color of each tab's content area. You may use a solid or gradient color.
2. Text Color: Choose the color of the text in each tab's content area.
3. Typography: Set the typography options of the text in each tab's content area.
4. Padding: Set the Padding of the tab's content area in PX or %.
5. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
6. Radius: Set the border radius to control corner roundness.
7. Shadow: Adjust box shadow options

Advanced Settings

Set the Advanced options that are applicable to this control.