Tabs Settings
![]() |
Inactive Tab
![]() | Color Properties:
Set the Font Color of the inactive tabs.
Chose the Background Color of the inactive tabs.
Define the Background Opacity of the inactive tabs. |
![]() | Font Properties:
Define the Font size of the inactive tabs.
Choose the Font Style ( Bold, Italic, Underlined) of the inactive tabs. |
![]() ![]() | Border Color Properties:
Choose the Border Style (dotted/ dashed/ solid/ double/ none) of the inactive tabs.
Click on the Border to enable/ disable.
Define the Border Color.
Set the Border Thickness.
By changing the global radius of the borders, you can make it square or circle shaped.
Lets you change the shape of the top left/ right part of the border. |
Active Tab
![]() | Active Color Properties:
Set the Font Color of the active tab.
Chose the Background Color of the active tab.
Define the Background Opacity of the active tab. |
![]() | Active Font Properties:
Define the Font size of the active tab.
Choose the Font Style ( Bold, Italic, Underlined) of the active tab. |
![]() ![]() | Border Color Properties:
Choose the Border Style (dotted/ dashed/ solid/ double/ none) of the active tab.
Click on the Border to enable/ disable.
Define the Border Color.
Set the Border Thickness.
By changing the global radius of the borders, you can make it square or circle shaped.
Lets you change the shape of the top left/ right part of the border. |
![]() | Active Tab Indicator: Indicator- is a line, highlighting the active tab.
Choose the Indicator Position (Top/ Bottom/ Both).
Set the Border Width for Indicators
Define the Indicators Color |
Navigation Bar
Navigation Bar is the area behind the Container Tabs.
![]() | Navigation Color Properties:
Set the Background Color.
Define the Background Opacity. |
![]() ![]() | Navigation Border Properties:
Choose the border style (dotted/ dashed/ solid/ double/ none).
Click on the border to enable/ disable.
Choose the color for the navigation border.
Define the Thickness of the Navigation Border.
Changing the radius of the navigation borders to make it square or circle shaped. |
![]() | Separation: Define the Space between the Tabs. |
tabs styling examples:
![]() |
![]() |
![]() |
![]() |