Vizlib Community

Submit a ticket Sign in
Welcome
Login

Vizlib Container Grid - Tabs Settings

Tabs Settings



Inactive Tab

Color Properties:
  • Font Color

Set the Font Color of the inactive tabs

  • Background Color

Chose the Background Color of the inactive tabs.

  • Background Opacity

Define the Background Opacity of the inactive tabs.


Font Properties:
  • Font Size

Define the Font size of the inactive tabs.

  • Font Style

Choose the Font Style ( Bold, Italic, Underlined) of the inactive tabs.

Border Color Properties:
  • Border Style

Choose the Border Style (dotted/ dashed/ solid/ double/ none) of the inactive tabs.

  • Border Selector

Click on the Border to enable/ disable.

  • Border Color

Define the Border Color.

  • Border Width

Set the Border Thickness.

  • Global Radius

By changing the global radius of the borders, you can make it square or circle shaped.

  • Top Left/ Right Radius

Lets you change the shape of the top left/ right part of the border. 




Active Tab


Active Color Properties:
  • Active Font Color

Set the Font Color of the active tab. 

  • Active Background Color

Chose the Background Color of the active tab.

  • Active Background Opacity

Define the Background Opacity of the active tab.


Active Font Properties:
  • Font Size

Define the Font size of the active tab.

  • Font Style

Choose the Font Style ( Bold, Italic, Underlined) of the active tab.


Border Color Properties:
  • Border Style

Choose the Border Style (dotted/ dashed/ solid/ double/ none) of the active tab.

  • Border Selector

Click on the Border to enable/ disable.

  • Active Border Color

Define the Border Color.

  • Active Border Width

Set the Border Thickness.

  • Global Active Radius

By changing the global radius of the borders, you can make it square or circle shaped.

  • Top Left/ Right Active Radius

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.  

  • Enable tab Indicators
  • Indicator Position

Choose the Indicator Position (Top/ Bottom/ Both).

  • Indicator Border Width

Set the Border Width for Indicators

  • Indicator Color

Define the Indicators Color

Navigation Bar

Navigation Bar is the area behind the Container Tabs.

Navigation Color Properties:
  • Navigation Background Color

Set the Background Color.

  • Navigation Background Opacity

Define the Background Opacity.

Navigation Border Properties:
  • Navigation Border Style

Choose the border style (dotted/ dashed/ solid/ double/ none). 

  • Border Selector 

Click on the border to enable/ disable.

  • Navigation Border Color

Choose the color for the navigation border.

  • Navigation Border Width

Define the Thickness of the Navigation Border. 

  • Navigation Border Radius

Changing the radius of the navigation borders to make it square or circle shaped.

Separation:
Define the Space between the Tabs.

tabs styling examples:

V
Vizlib is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.