Tab Component

Application scenarios: Users who have installed the Data Portal plugin can refer to this article to learn about the Tab Component function of the data portal.

Version

Application Scenarios

• You want to combine components of the same subject in a tab, thus viewing content of different subjects in a space-saving way by switching between different tab pages.

• When using the data dashboard component, you need to display data in multiple dimensions and view different dimensions by switching between them.

Functions

• You can add multiple components within different tab pages of a tab component and switch between different tab page titles.

• Tab Component allows adding new tab pages, editing tab page titles, adjusting tab page order, and setting tab component style.

Note:

Adding tab components within a tab page is not supported.

This article introduces how to use the Tab Component in the data portal dashboard, and takes the effect in the following figure as an example.

Log in to decision-making platform as the admin, choose System Management > Data Portal > Portal Management, click Add a New Portal to create a data portal dashboard.

Click to open the editing interface, select Other and then drag a tab component into the data portal.

The newly added tab component defaults to having a blank tab page.

Click on the right of the tab page title to add two more tab pages. The default name for the newly added tab pages is tab.

• Tab Component allows adding: Common Content, Quick Access, Announcement, Report Dynamics, My Message, Data Dashboard, Text Component, Image Component, and Web Component.

• Tab component does not change the settings of the original component and its effective scope.

Click the first tab page to add components. In the editing interface, drag Announcement and My Message into the first tab page.

Note:

If the tab title is not renamed, it changes automatically to the name of the component first added to the tab page. For example, in the above figure, the Announcement component is the first component added to the tab page, the tab page name is automatically changed to Announcement. If you continue to drag another component, the tab page title does not change.

Similarly, drag a Common Content component into the second tab page. Select the Common Content component, and choose Often View as the source of the component content on the right.

Similarly, drag a Common Content component into the third tab page. Select the Common Content component and choose Favorite as the source of the component content on the right.

To modify the title of the tab page, you need to hover your cursor over the tab page title, and appears. Click Edit Title to rename the title of the tab page.

Select the tab component, and you can set the component style on the right, including Common Setting (component style) and Tab Setting (tab page style).

Two styles are supported: the style that follows the theme and the custom style.

Following Theme

• If you select Follow Theme as the style, the component style completely follows the style of Portal Theme, only allowing setting visibility/invisibility of component titles and changing title texts.

• The tab page style completely follows the style of Portal Theme, only allowing setting Style and Position.

Custom

If you select Custom as the style, the component style does not change with the change of Portal Theme. Component styles include Component Title, Title Text, Title Style, and Component Background.

Tab page style does not change with the change of Portal Theme, allowing setting Style, Position, Tab Title, Default Status, and Selected Status.

There are three tab page styles.

• Style One: The title is underlined with the background color.

• Style Two: The title background is filled with the background color.

• Style Three: The title background is filled with background color, and the title borderline color is the background color of Default Status.

Default Status means the unselected status. You can set the font color and background color of tab pages when they are unselected.

Similarly, in Selected Status, you can set the font color and background color of tab pages when they are selected.

Deleting a Component

When you delete tab pages and tab components, the components in the corresponding tab pages are also deleted. A prompt appears when you delete them.

Deleting a Tab Component

Select the component, and appears. Click , and if tab component content is not empty, a prompt pops up: The components in the tab will also be removed. Are you sure to delete? Click Confirm, and the components in the tab page are also deleted.

Deleting a Tab Page

Hover your cursor over the tab page to be deleted, and appears. Click Delete, and if the tab page content is not empty, a prompt pops up: The components in the tab will also be removed. Are you sure to delete? Click Confirm to delete the tab page.

Deleting the Component in a Tab Page

After a component is selected, the delete button appears. Click to delete the component.

Adjusting a Component

Adjusting a Tab Component

Hover your cursor over a component, a dashed box appears. You can drag it to adjust the size and position of the component.

Adjusting the Order of Tab Pages

Drag the tab page to adjust its order.

Adjusting Components in the Tab Page

Hover your cursor over a component, and a dashed box appears. You can drag it to adjust the size and position of the component.