FVS Tab Component

This document applies to users who have installed the FineVis Data Visualization plugin to learn relevant functions. 

Version

Function Introduction

The Tab component is a container where you can create multiple tab pages and drag components or component groups into each tab page, which can be automatically played in turn according to certain rules or manually switched.

Note:

This document introduces only the unique functions of the Tab component. For details about other attributes, see FVS Component Interaction Attributes. 

Create an FineVis visualization dashboard.

Add a Tab component, with the default message saying "Drag the component/combination into the Tab container. The added component/combination can be freely laid out in the tab page."

You can drag components from the component area or other components/combinations on the dashboard into the Tab component. It prompts "Release to enter the carousel component." Release the mouse. Then the dragged component/combination is added to the tab page.

The layout rules of the tab page are consistent with those of the absolute canvas:

• The size of the dragged-in component remains unchanged.

• If the dragged-in component crosses the left/upper boundary of the tab page, its left and upper edges will be automatically aligned with the left and upper boundaries of the tab page. The component can cross the right/lower boundary of the tab page.

• If the dragged-in component crosses the right/lower boundary of the tab page, select the tab page or the component, and scroll horizontally/vertically to view the component (the scroll bars hover during a preview.).

Note:

You can drag other Tab components into a Tab component, but at most three layers of Tab components can be nested.

You can also add a component into a Tab component by dragging the component layer and dropping it under the Tab component layer in Component Layer. The added component is located at the center of the tab page by default.

You can remove a component from a Tab component in the following three ways.

• Drag the component out of the Tab component. It prompts "Release to move out of Tab Page." Release the mouse and the removed component will be located at the release position.

• Drag the component layer out of the Tab component layer in Component Layer or Tab List. The position of the removed component remains unchanged. 

• Hover your cursor over the component in Tab List, and choose More > Move out to remove the component from the Tab component. The removed component is placed on the right side of the Tab component by default.

A tab page comes with each added tab component. You can add multiple tab pages.

All tab pages and internal components are displayed in the right Tab List, and the content is the same as that in the left Component Layer.

You can customize the name, border, border line, and corner radius of each tab page separately. The name of the tab page is the text content displayed on the tab page button.

Note:

Names of Tab components, tab pages, and components cannot be duplicated.

In the Tab List, you can add tab pages, and rename, delete, hide, and lock objects. If there is only one tab page in a Tab component, the Tab component will be deleted if you delete the tab page.

You can drag a tab page from the bottom up to change the order. 

Note:

Dragging a tab page from the top down is not supported. You can choose Arrange > Send Backward.

Select a Tab component, and you can set Tab Page and Page-Switching Button in Content below the Tab list.

Tab Page

Resize Lock

If you tick Enable Resize Lock, resizing the Tab component will resize the internal component in proportion.

Padding

If you have enabled Reset XX Layout for the template, click the  icon and you can set Padding and Component Spacing of the tab page.

Page-Switching Button

Tick Show Page-Switching Button, and you can switch tab pages through Tab Page Button or Arrow.

Tab Page Button

The settings of Tab Page Button are shown in the following figure.

The setting items are described in the following table.

Item	Explanation
Display Strategy	Fixed Position: During a preview, tab page buttons are displayed on the Tab component by default. Hover: During a preview, tab page buttons are not displayed by default and only appear once you hover the cursor over the Tab component.
Style	Used to set the button style. Three options are available, namely Tech, Button, and Underline.
Layout	Proportional: Adaptively display the navigation bar according to the length of the tab page name and the font size, with page-turning arrows if the button length exceeds the Tab component length. Equal: Equally divide the navigation bar according to the length/height of the Tab component and the number of tab pages, with each tab page button being the same length.
Position	Used to adjust the position of the navigation bar. Four options are available, namely Top, Bottom, Left, and Right.
Font Style	Used to adjust the font, size, etc. of the text on the tab page button. The navigation bar is resized adaptively according to the text size.
Button Style	If Style is set to Tech, you can set the following items. Button Style: Set the character color of selected and unselected buttons.  Button Image: Set the bottom image of the button. Five options are available and you can change the color. Page-Turning Arrows: Set the style (four options) and color of the page-turning arrows. The setting item is available only when the layout mode is set to Proportional and the length of the navigation bar exceeds the length of the Tab component.
	If Style is set to Button, you can set the following items. Button Style: Set the character color of the text, the filling color of the background, and the style of the border line of unselected and selected buttons separately. Rounded Corner: Apply rounded corners to the tab page buttons as a whole. Note: If Style is set to Button, Layout is set to Proportional, and the length of the navigation bar exceeds the length of the Tab component, page-turning arrows exist by default and cannot be set.
	If Style is set to Underline, you can set the following items. Button Style: Set the character color of the text, the filling color of the background, and the style of the borderline of unselected and selected buttons separately. Note: If Style is set to Underline, Layout is set to Proportional, and the length of the navigation bar exceeds the length of the Tab component, page-turning arrows exist by default and cannot be set.

Arrow

The settings of Arrow are shown in the following figure.

The setting items are described in the following table.

The positions of the arrows and navigation dots are shown in the following figure.

Select a Tab component, click Interaction, and you can set Enable Auto Carousel and Add Tab Switching Event.

Auto Carousel

The automatic carousel function is enabled by default, with a default interval of 6000 milliseconds.

• If Enable Auto Carousel is unticked, the Tab component displays the first tab page in the Tab list by default during a preview. You can manually switch the tab pages.

• If Enable Auto Carousel is ticked, the content of each tab page is displayed in turn at the specified interval according to the order in the Tab list during a preview. The carousel stops if you hover your cursor over the Tab component and it continues if you move the cursor out of the Tab component.

Tab Switching Event

Supported events in Add Tab Switching Event include Component Linkage, 3D Model Animation, and JavaScript.

Page Swiping Setting for Mobile Terminals

If you select the mobile mode, Enable Swipe Between Pages is ticked by default. When you preview the dashboard on a mobile terminal, you can swipe left and right to switch tab pages.

After the plugin is upgraded to V2.3.1, you can add tab pages to the existing carousel component, and the original functions can be normally used.

Note that if the tab page button was not used for the carousel component, the button content is the tab page name after the button is used. If the tab page button was used for the carousel component, the tab page name is generated according to the rules of the Tab component, but the button content is still the original content.

You can learn advanced use of the Tab component after learning the basic use.