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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Number of Tab(s): Determines the number of tabs to be displayed on the page.
  3. Default Active Tab: Sets the tab that should be active by default. If unspecified, the first tab is selected by default.
  4. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  5. Label Name: Specifies the display name or title for a field or control in the user interface.

2nd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Show go to next Button: Displays a button to navigate to the next step or section.
      1. Next Button Text: Defines the label or text displayed on the next button.
    3. Remove Border: Removes the border from the container or element.
    4. Remove Background: Removes the background styling from the container or element.
  2. Others
    1. Remember last selected tab: Keeps track of the last tab selected by the user and automatically opens it when revisiting the page.
    2. Load external form?: Allows loading an external form into the tabs for seamless integration.
    3. Show conditional view: Displays the tab based on certain conditions with options like “Yes” or “No.”
      1. Clear Data on tab change: Clears any data or input fields when the user switches between tabs.
    4. Show conditional view with Image: Displays the conditional view of the tab along with an associated image for better context.
  3. Mobile
    1. Tabbar: Customizable settings for the tab bar's appearance and layout.
      1. Background Color: Sets the background color of the tab bar.
      2. Border Radius: Defines the rounded corners of the tab bar.
      3. Border Color: Sets the color of the border around the tab bar.
      4. Border Width: Specifies the thickness of the tab bar's border.
      5. Padding Left: Adds space to the left inside the tab bar.
      6. Padding Top: Adds space to the top inside the tab bar.
      7. Padding Right: Adds space to the right inside the tab bar.
      8. Padding Bottom: Adds space to the bottom inside the tab bar.
      9. Margin Left: Adds space to the left outside the tab bar.
      10. Margin Top: Adds space to the top outside the tab bar.
      11. Margin Right: Adds space to the right outside the tab bar.
      12. Margin Bottom: Adds space to the bottom outside the tab bar.
      13. Justify: Aligns the content within the tab bar (e.g., left, center, or right).
    2. Tab: Styling options for individual tabs.
      1. Background Color: Sets the background color of the tab.
      2. Active Background Color: Specifies the background color of the active tab.
      3. Text Color: Sets the text color for the tab.
      4. Active Text Color: Specifies the text color of the active tab.
      5. Tab Text Size: Defines the size of the text within the tab.
      6. Border Radius: Defines the rounded corners of the tab.
      7. Border Color: Sets the color of the border around the tab.
      8. Border Width: Specifies the thickness of the tab's border.
      9. Padding Left: Adds space to the left inside the tab.
      10. Padding Top: Adds space to the top inside the tab.
      11. Padding Right: Adds space to the right inside the tab.
      12. Padding Bottom: Adds space to the bottom inside the tab.
      13. Margin Left: Adds space to the left outside the tab.
      14. Margin Top: Adds space to the top outside the tab.
      15. Margin Right: Adds space to the right outside the tab.
      16. Margin Bottom: Adds space to the bottom outside the tab.
    3. Container Height (%): Specifies the height of the tab container as a percentage of its parent container.

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