Tab Bar

---

Tabs help organize a large volume of information within the forms. They increase the efficiency of the process by enabling users to quickly jump between tabs without the need for additional forms. Having the data of multiple forms layered into separate tabs under one form also helps stop overwhelming the users.

Tab Bar Properties

These properties control the overall appearance and function of the Tabs.

Property	Description
Background	Changes the color of the tab bar.
Border Radius	Changes the edge's curve-angle of the tab bar.
Border Width	Sets the thickness of the tab bar borders.
Border Color	Sets the color of the tab bar border.
Tab Min/Max width	Sets the maximum and minimum width of the tab header.
Tab Position (Top/Bottom)	Sets the tab bar's position on the screen - either to the top or the bottom.
Tab Type (Text Only/Text with Icon)	Selecting "text with icon" allows you to add an icon to the individual tab headers. You can set separate icons for selected and unselected tabs too.
Padding (All Sides + Individual Sides)	Sets the padding of a tab (space between the tab's borders and the components within).
Tab Bar Padding (All Sides + Individual Sides)	Sets the padding within the tabs' headers.

Adding a Tab

You can add any no. of tabs to your form. And here's how to add a new one.

• To create a tab, click the ADD button next to the "Add Tab" label.
• Then "Enter Tab Label", which will be the tab's name/header.
• And click on SUBMIT.

This will add a new tab to the form.

Deleting a tab

To delete a tab, click the "Bin" icon next to the respective tab's name.

Event Handlers

The following event handlers are used for triggering custom processes on specific events.

onLoad

onLoad - Enables the use of pre-defined actions on a tab load.

onSwitch

onSwitch - This enables new actions on switching to a different Tab.

Icon URL (Only on selecting "Text with Icon")

• Place the URL of the icon that you want displayed.

[Note: You can use different icons for the selected and the unselected tabs.]

---

Selected / Unselected Tab Properties

These properties control the appearance of the currently Selected or Unselected Tabs.

Property	Description
Background	Change the background color of the selected/unselected tabs' headers.
Border Radius	Changes the border curve angle of the tabs.
Border Width	Sets the thickness of the tabs' borders.
Border Color	Sets the color of the tabs' borders.
Bottom Line Color	Highlights the selected/unselected tab with a simple colored line at the bottom.
Font Size	Changes the font size of the text within the tab's header.
Font Color	Changes the font color of the text within the tab's header.
Font Weight	Sets the thickness of the header text.

Tab Bar Design Samples/Ideas -->

Here's a quick look at the possible design implications of the tab bar widget.

---