Tab component

The Tab component allows users to create multiple buttons (tabs) that control the visibility of associated groups of components. Each tab can be linked to a specific group, and clicking a tab will show its associated group while hiding others.

Tabs can be aligned horizontally or vertically and styled for consistency with dashboard themes. This component is especially useful for organizing dashboards with many components into compact, navigable sections.

Best Situations to Use

Use the Tab component when you want to:

• Organize dashboard components into logical groups without crowding.

• Provide navigation across multiple sections within the same dashboard.

• Create a clean, user-friendly interface for dashboards with many charts or filters.

• Allow users to switch between KPIs, data views, or chart sets quickly.

Not Recommended for:

• Dashboards with only a small number of components (where grouping is unnecessary).

• Scenarios requiring simultaneous visibility of all components.

Properties

General

• Component Name: Assign a unique identifier.

• Left / Top: Position the Tab component on the dashboard canvas.

• Height / Width: Define component dimensions.

• Initial Visibility: Toggle whether the Tab component is visible on first preview.

• Tab Alignment: Choose between Horizontal or Vertical orientation.

• Manage Tabs:

  • Add multiple tabs.

  • Rename tabs.

  • Assign icons (e.g., bd-diamond).

  • Define the default selected tab.

• Associate Groups: Link each tab to a group of components created earlier.

Style

• Background Color: Define background color for tabs.

• Background Opacity: Adjust transparency of tab background.

• Font Color: Set text color.

• Font Size: Adjust label size.

• Font Style: Apply italic or normal styling.

• Font Weight: Define thickness (e.g., normal, bold, 300/600/900).

• Font Family: Select a consistent typeface.

• Button Radius: Round the tab button corners.

• Button Width: Control button width.

• Spacing: Set spacing between tabs.

• Selection Color: Define the color for the active/selected tab.

• Border on Selection: Enable border highlighting for active tab.

• Border Color: Customize border color for selected tab.

• Border Width: Set the thickness of the selection border.

• Content Alignment: Align tab content (center, left, right).

Steps to Associate Groups with Tabs

1. Create Groups

   • Open Manage Dashboard Components from the right panel.

   • Click Add Group and assign components to the group.

2. Manage Tabs

   • Open Manage Tabs in General Properties.

   • Add or rename tabs.

   • Assign icons as needed.

   • Select the default active tab.

   • Save changes.

3. Associate Groups

   • Open Associate Groups in General Properties.

   • Select a tab from the drop-down menu.

   • Associate the desired group with the tab.

   • Save changes.

4. Preview

   • Switch to Preview mode.

   • Click a tab to display its associated group of components.

Example Configurations

1. Horizontal Tabs for KPIs

   • Each tab shows a different KPI set (e.g., Sales, Revenue, Customers).

2. Vertical Tabs for Regions

   • Tabs aligned vertically to switch between dashboards for APAC, EMEA, and NA.

3. Icon-based Tabs

   • Tabs display icons instead of text for a more compact navigation experience.

Notes

• Tabs improve usability for dashboards with many components.

• Use selection colors and borders to clearly highlight active tabs.

• Keep tab names short for readability.

• Group related charts together logically before associating them with tabs.