Tab Component

Tab component has an option to create multiple buttons that can be associated to the group for displaying the show & hide visibility for the group components.

Check out the given demonstration on the Tab component.

using the Tab component in a Dashboard

Default Component Image

Properties of the Tab Component

General

User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. User can mange the tab & associate the group.

Manage Tabs

• The user can add multiple tabs and change the tab names.

• The Manage Tabs provides option to show the icons as per requirement.

  E.g., bd-diamond will display the normal icon.

• The user can select the default tab as displayed in the following image.

Please Note: The Manage Tabs option is provided inside the General Properties.

Associate Groups

The Associate Groups option is used to associate groups with charting components to each tab using the drop down as shown in the below given image:

Please Note: The Associate Groups option is provided inside the General Properties.

Style Properties

User can set the background colour and font colour as well as font styling properties in this section. Background Opacity for Tabs is added as well as spacing to provide space between tabs. Selection colour also added as used if required.

• Font Size - Set the font size.

• Button Radius – Set the Button radius.

• Spacing – Set the spacing between the buttons.

• Background Opacity – Set the opacity.

• Font Style – Select the font style.

• Font Weight – Select the font weight.

• Font Family - Select the font family.

• Font Color – Set the font color.

• Background Color – Set the background color.

• Selection Color – Set the selection color.

Steps to associate the group with tabs:

Before using the Tab Component, the user has to create groups with components that can be associated to the tabs later.

Creating Groups

• Click on the Manage Dashboard Components option provided in the right side panel of the Dashboard canvas.

• Click the Add Group option.

• Add each component to its respective group.

• Open the Manage Tabs from the General Properties.

• The Manage Tabs window opens.

• Select a Tab from the by default selected tabs using the given check box.

• Change Tab names (if required) and reference image/icon names as per requirement.

• Click the Save option.

• Open the Associate Tabs from the General Properties.

• The Associate Groups window opens.

• Select a Tab from the drop-down menu.

• Associate a group for each Tab by using the checkbox.

• Click the Save option.

• Open the Preview mode for the dashboard.

• Click on the Tab, it will display the associated group of component.