Content Controls
Content
This section allows you to customize the content of each tab in your Advanced Tabs Element. You can add icons, set titles, and define the content for each tab, as well as control which tab is active by default.
- Tabs – Manage the individual tabs within your element.
- Icon – Choose an icon to display alongside each tab’s title for visual enhancement.
- Title – Set the title for each tab, which appears on the tab button.
- Content – Define the content that will be displayed when each tab is selected.
- Active Tab – Specify which tab should be displayed as active when the page first loads.
- Open On Hover – Have tabs opened when they are hovered over instead of clicked.
Design Controls
Tabs
These controls allow you to style the tabs, including their orientation, position, spacing, and various styling options, such as color, typography, and effects, to create a seamless and engaging user interface.
- Vertical – Toggle between vertical and horizontal layouts for your tabs.
- Horizontal At – Define the breakpoint at which tabs switch from vertical to horizontal layout.
- Style – Choose the overall style of your tabs, such as bar, pills, or separators.
- Position – Set the position of your tabs, either at the top, bottom, left, or right, depending on the layout.
- Space Between – Adjust the space between individual tabs.
- Space After – Control the space after the tabs, before the content area begins.
- Bar – Customize the bar style tabs with options for separators, radius, and shadow.
- Pill Radius – Set the radius for pill-style tabs.
- Separator – Style the separators in tab-style layout.
- Text – Customize the typography, hover, and active state colors of the tab titles.
- Background – Style the background for inactive, hover, and active tab states.
- Underline – Customize the underline feature for your tabs.
- Padding – Adjust the padding inside the tabs for better layout and spacing.
- Icon – Customize the icons used in your tabs, including size, position, and spacing.
- Responsive – Manage how your tabs behave on different devices, including dropdown styles and visibility options.
- Transition Effect – Set the transition effect speed when switching between tabs.
Size
Control the overall size of your tabs, ensuring they fit well within your layout and design scheme.
- Width – Adjust the width of your tabs to match your design requirements.
- Min Height – Set a minimum height for your tabs to maintain a consistent size and appearance.
Spacing
Manage the spacing around your tabs, including the wrapper margins, to ensure they integrate seamlessly with your page’s layout.
- Wrapper – Customize the spacing around the tab wrapper for optimal placement on your page.
- Margin Top – Set the top margin to control the space above the tabs.
- Margin Bottom – Adjust the bottom margin to manage the space below the tabs.
