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:
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 radius of the borders, you can make it square or circle shaped. |
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 radius of the borders, you can make it square or circle shaped. |
 | Active Tab Indicator: Indicator- is a line, highlighting the active tab.
Choose the Indicator Position (Top/ Bottom/ Both).
Set the Thickness for Indicators lines.
Define the Indicators Color. |
Tabs Settings
 | Text:
Choose between left/ middle/ right Alignment.
Choose the Font Family or define your own.
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.
Choose the Hover color.
Define the Hover Opacity.
|
accordion styling examples:
 |
 |
 |
Active Tab