Tab Component

1. Overview

1.1 Version Support

1.2 Application

Users can add components to different tab pages under a Tab component, and click the title to switch between tabs. As shown below:

The titles are displayed in two lines, the first line displays the Tab component title, and the second line displays the tab title.

1.3 Function Introduction

• The Tab component supports overlap, copy and paste, deletion, and style settings;

• The tab page in the Tab component supports adding, deleting, and setting the title and style.

Note: The tab page in the Tab component is loaded asynchronously.

2. Add a tab component

Click "Other>Tab Component" on the dashboard editing interface, then the Tab component is successfully added. As shown below:

3. Add a tab

Click the "+" next to the component tab page title to add a Tab page. The added tab page is all called tab. As shown below:

Note: The title of the tab page is left aligned by default. When the display space is not enough, you can slide the tab page to the left and right. Click the tab page title to switch the tab page.

4. Add a component in a tab

• Supported components: other components (except Tab components) and chart/table components.

• The effective scope of the added components: The Tab component does not change the settings and effective scope of the original component (Including linkage, drilling and other effects).

First click on the tab, switch to the tab in which you want to add components, and then drag a component into it. The components will automatically fill the entire tab page. As shown below:

Note: The tab component can be resized, and the components in the tab page will automatically fill up after the resize. Only one component can be added to each tab page.

5. Adjust the order of tabs

You may drag the tabs left and right to adjust their order.

6. Edit tab titles

The tab page title can be renamed. Hover the mouse over the title of the tab page that needs to be renamed, and a drop-down box will appear. Click "Edit Title" to rename the title of the tab page. As shown below:

Note 1: If the tab page does not have a custom title, the name of the component itself will be displayed when the component is dragged in. If the component is dragged in after the tab title is edited, the tab title will be displayed.

Note 2: The title supports style settings. Please refer to section 7.3 of this article.

7. Style settings

7.1 Enter style settings

Click the Tab component and select ">Style Setting" to enter the style setting interface. As shown below:

In the style setting interface, you can set the Tab component title and tab page style. The set style can be previewed in the dashboard. After setting, click "OK" to save the set style. The style setting interface is shown in the figure below:

7.2 Style settings of tab component title

The component title supports setting whether to hide the title, font type, font size, bold, italic, underline, position, and component title background.

7.2.1 Hide and show tab component title

Tab component title is displayed by default, uncheck "Display" to hide the title. Here, click to check the "Display" heading. As shown below:

7.2.2 Set tab component title

When the component title is displayed, the content and style of the component title can be set.

Click the content box to enter the component title content and style setting interface, as shown in the figure below:

Click on the text to modify the component title. As shown below:

The component title style is "Auto" by default, click "Custom" to set the style: font "20", bold, centered, and click "OK" when finished. As shown below:

Custom font style supports setting the font type, font size, bold, italic, underline, and position of the title.

Take a preview:

7.2.3 Edit title background

The title background can be set to "color" or "picture".

• Color: Click to set the background color. Choose custom color, transparent, automatic.

• Picture: Click to upload a picture as the dashboard background.

For example, if the background color of the title is set to "light blue", the effect is as shown in the figure below:

7.3 Style settings of tab pages

The title style only supports unified settings, including title content, default state, and selected state.

Tab component style setting supports unified setting of tab title style and position, but does not change the original component settings and effective scope.

Note: The background of the Tab component itself is the same as the automatic effect of the dashboard style component background by default, and can be modified in the dashboard style component background.

7.3.1 Set tab styles

There are three styles of the Tab page title:

• Style 1: The background of the label is a underline, and the effect of the mobile terminal is the same as that of the PC terminal.

• Style 2: The background of the selected label is a color block. The mobile terminal has the same effect as the PC terminal.

• Style 3: The background colors of all labels are color blocks, the display effect of the PC terminal and the mobile terminal are inconsistent, and the display effect of the mobile terminal is similar to Style 1.

Click to select "Style 2". Results as shown below:

7.3.2 Set tab position

The position of the tab page title can be set to left, center, or right aligned. The default is to the left. Select "Center", the effect is shown in the figure below:

7.3.3 Set tab title styles

Support setting the font content of the tab page title (including: font type, font size, bold, italic, underline). Custom font settings: "16", underlined. Results as shown below:

7.3.4 Set the default status

The default status, that is, the unselected state. Setting the font and background color of the tab page of the unselected state is supported. The effect after setting is as shown in the figure below:

7.3.5 Set the selected status

The selected state supports the setting of the tab page font and background color. As shown below:

After all settings of the Tab component, click "OK" to save the style.

7.4 Effect Preview

7.4.1 PC

Please refer to section 1.2.

7.4.2 Mobile

Preview effect is as follows:

8. Copy and paste

8.1 Copy tab components

Please refer to the document for: Copy components.

8.2 Copy tab pages

Click on the tab and drop down and select "Copy" to copy the current tab, as shown in the figure below:

Note: If the title of the tab is set, the name of the copied tab is the same as the original one.

8.3 Copy components in the tab

The components in the tab page also support copy and paste. For example, click "Text", select the component and drop down to select "Copy". If the component is successfully copied, it will be automatically displayed at the bottom of the current page. As shown below:

9. Overlap

Please refer to the document: Component Overlap

Note: Components in the tab do not allow overlap; Components with overlap settings is not supported to be dragged into the tab.

10. Deletion

If the tab page and Tab component are deleted, the corresponding components will also be deleted, and a prompt will be given when deleting.

10.1 Delete the tab component

When deleting the tab component, the components inside it will also be deleted:

10.2 Delete the tab

Click on the tab title, select [v > delete] and click [OK] to delete the tab. The components in the tab will also be deleted:

10.3 Remove the components in the tab

Components in the tab can be removed from the tab to the dashboard: