Tabs

Tabs provide an organized way to present and navigate between different content sections within a single view. Users can switch between sections by clicking tab headings, making navigation easier and improving content organization.

Style settings

Property	Description
Type	Select tab style type: Solid Splitted
Rounding	Adjust corner radius of tabs
Display border	Toggle border visibility around tabs and content area (Yes/No)
Border color	Set the color for borders
Thickness	Adjust border thickness
Tabs
Position	Choose tab placement: Top Left Right
Sizing	Set how tabs adapt to their content: Adaptive Fixed
Background color	Define the background color for tabs
Hover color	Set the color that appears when users hover over tabs
Select color	Define the color for the currently selected tab
Display divider	Toggle visibility of separators between tabs (Yes/No)
Divider color	Set the color for dividers between tabs
Thickness	Set the thickness of the divider
Content area
Background color	Set the background color for the content display area
Effects
Tabs shadow	Add and configure shadow effects for the tabs component: Click the "+" icon to add shadow effects. Select from shadow styles: None, Soft, Regular, or Retro.
Navigation buttons
Display button	Toggle visibility of navigation buttons (Yes/No)
Background color	Set the background color for navigation buttons
Hover color	Define the color that appears when hovering over navigation buttons
Icon color	Set the color for navigation icons
Previous icon upload	Upload a custom icon for the previous navigation button
Next icon upload	Upload a custom icon for the next navigation button
Margins
Tab paddings	Set internal spacing for tab headings (top, right, bottom, left)
Content paddings	Set internal spacing for the content area (top, right, bottom, left)

Typography settings

Use Rich-text on the Typography tab to apply specific formatting to selected text within tabs. Changes made here affect only the text in the Tab element:

• Basic

• Headings

• Caption

• List

• Quote

• Link

For details on how to configure parameters in rich-text options, see Typography and fonts.