Vizlib Community

Submit a ticket Sign in
Welcome
Login

Vizlib Container Grid - Accordion Settings

Accordion Settings


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



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.




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.


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.


accordion styling examples:

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.