Tabs
- Content Writers
Overview
Tabs are a group of tab component used to navigate and allow users to switch between different views or sections within the same layout. Each tab represents a distinct section, and selecting a tab displays its associated content while hiding the content of other tabs.
Tabs help organize content into manageable sections, enabling users to navigate and access information efficiently without loading new pages or screens
Attributes
Attributes are the options available for each component, allowing you to customize its appearance and control their behavior. It includes various sections explained below.
Basic:
Attribute Name | Description |
|---|---|
Component Size |
For example, |
Layout Type | It is used to set the layout type in two ways as:
Note: By default, this attribute is set to a value of Grid Layout Type. |
Default Tab | If you have multiple tabs, select the number to set the default tab. |
Overflow Limit | This feature lets you control the number of tab. Setting the limit to 1 will show only one tab, with other appearing in a dropdown menu. |
Config:
Attribute Name | Description |
|---|---|
Show As Wizard | Enables a step-by-step navigation experience within the tabs. When enabled, users can progress through steps in a structured manner |
Allow Invalid Switch | Allows users to move between tabs even if the current step contains validation errors |
Allow Switch by Tab | Enables users to navigate between steps using tab selection. Users can switch steps by clicking on tabs instead of using navigation buttons |
Hide Progress Indicator | If checked, the progress indicator that visually represents the steps in the wizard will be hidden |
Show Submit | Displays the submit button within the wizard interface, allowing users to complete the form submission |
Submit Label | Defines the label text for the submit button, enabling customization with merge text |
Save on Switch | Automatically saves the progress when switching between steps to prevent data loss |
Override Next | Allows customization of the "Next" button’s behavior, enabling users to define specific actions when proceeding to the next step |
Override Previous | Allows customization of the "Previous" button’s behavior, enabling users to define specific actions when navigating back to a previous step |
UI State:
Attribute Group | Attribute Name | Description |
Visibility | Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
Reference: Conditional Visibility. |
Base UI:
Attribute Name | Description |
|---|---|
Margin Location | "Margin Location" refers to the spacing around the outside edge of an element |
Margin Size | "Margin Size" refers to the amount of space around the outside edges of an element |
Note: After clicking inside the tab section on the layout, you will see the tab configuration.
Tab Configurations
