Tab

This Control is used to create multiple tabs on a Page in the application. When a tab is selected, the contents of the Tab are displayed, and any other open tab is hidden. It is effortless to create separate tabs in an application using this Control. In the following instance, we can switch between the Card view and Grid View by clicking the Tab on the top of the screen.

You have to go through a two-step form wizard to enable this Control, i.e., Design & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Tab” layout form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): These are the attributes of the form
2. Number of Tab(s): Number of tabs you want in page
3. Default Active Tab: Mostly used in case when a user wants to set a tab as the default tab on a page. If nothing is mentioned than first tab is default
4. Column Width
5. Label Name

2nd Step – Advance

1. Design
1. Bootstrap Column Class
2. Show go to next Button
   1. Next Button Text
3. Remove Border
4. Remove Background

2. Others
1. Remember last selected tab
2. Load external form?: If the user wants to load an external form in tabs
3. Show conditional view: Tab can be shown as conditional view with options like “Yes” or “No.”
   1. Clear Data on tab change
4. Show conditional view with Image

3. Mobile
1. Tabbar
1. Background Color
2. Border Radius
3. Border Color
4. Border Width
5. Padding Left
6. Padding Top
7. Padding Right
8. Padding Bottom
9. Margin Left
10. Margin Top
11. Margin Right
12. Margin Bottom
13. Justify
2. Tab
1. Background Color
2. Active Background Color
3. Text Color
4. Active Text Color
5. Tab Text Size
6. Border Radius
7. Border Color
8. Border Width
9. Padding Left
10. Padding Top
11. Padding Right
12. Padding Bottom
13. Margin Left
14. Margin Top
15. Margin Right
16. Margin Bottom
3. Container Height (%)

Click “Confirm” and “Tab” control is configured.