Vizlib Home Try Vizlib
Welcome
Login

Vizlib Container Grid Properties - Accordion Settings

TABLE OF CONTENTS


Accordion Settings


Note! As the user, you have to select the Accordion before you can see it's settings in appearance.



Back to Contents


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.

  • Border Radius

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





Back to Contents


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.

  •  Active Border Radius

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




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 Thickness for Indicators lines.

  • Indicator Color

Define the Indicators Color.


Back to Contents


Tabs Settings


Text:
  • Text Alignment

Choose between left/ middle/ right Alignment.

  • Font Family

Choose the Font Family or define your own. 

  • Overflow text

When there is not enough available space to show the text-  an ellipsis will be displayed / alternatively text will be wrapped into multiple lines. 

Hover Color Properties:
Hover color highlights the area which is being moused over.
  • Hover Color

Choose the Hover color.

  • Hover Opacity

Define the Hover Opacity.


Back to Contents

Examples



Back to Contents

Active Tab

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.