I. Overview
Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.
1. Version
| Report server version | JAR package | FVS large screen editing mode (beta version) version |
|---|---|---|
| 11.0 | 2021-11-15 | V1.0.0 |
2. Function introduction
The "Carousel Component" is a container that can drag other various components (excluding the Carousel component itself, which does not support group) into the "Carousel Component", and rotate according to certain rules.
Note: This article only introduces the unique functions of the Carousel component, and other attributes are not repeated.
For component interaction, please refer to: FVS Component Frame Interaction Attributes
For component animation, see: FVS Component Frame Animation Attributes
For component attributes, please refer to: FVS Component Attributes
II. Add a carousel component
Create a new big screen dashboard:
Add a Carousel Component to the page, the default display "Drag a component into the carousel component. Added component will fill the entire carousel area adaptively.". As shown below:
Users can select and drag various other components on this page into the carousel component. When the prompt "Release into the carousel component" appears, release the mouse to add the component to the carousel list.
Note: The group does not support dragging in "Carousel Component", and "Carousel Component" does not support dragging in "Carousel Component".
If you drag a group/"Carousel component" into the "Carousel component", it will prompt "This component/group cannot be dragged into carousel components".
III. Carousel list
1. Display method
Each carousel page can only display one component, and multiple components are not supported.
After the component is dragged into the carousel component, it no longer exists in the layer area. The component size becomes the same size as the carousel component.
2. Display order
According to the order in which the components are dragged, the ones dragged in first are on the top, and the ones dragged in later are on the bottom.
When previewing, rotate from top to bottom.
You can select a component in the carousel list and drag it up and down to adjust the order of the components.
3. Component edit
In the carousel list, components can be edited, renamed, moved out, deleted, etc.
Edit: Modify the data configuration, interaction and other attributes in the component.
Rename: The name of the component can be modified.
Move Out: Move the component out of the carousel component to the page and reappear in the layer list.
Delete: Delete the component.
IV. Carousel button
If Show carousel button is checked, two types of carousel buttons are supported: Arrow button and Tab button.
1. Arrow button
The arrow button settings are shown below:
The specific description of each setting item is shown in the following table:
| Setting | Description |
|---|---|
| Display | Two display strategies are supported:
|
| Size | Used to adjust the size of the arrow buttons |
| Color | Used to adjust the color of the arrow buttons |
| Opacity | Used to adjust the transparency of the arrow buttons |
| Navigation Dot | Control whether the bottom navigation point appears |
The position of the aroow and navigation points is shown in the following figure:
2. Tab button
Tab button settings are shown in the following figure:
The specific description of each setting item is shown in the following table:
| Setting | Description |
|---|---|
| Display | Two display strategies are supported:
|
| Button Style | The carousel component has a variety of built-in tab bar styles, which users can choose by themselves |
| Layout | Two layout styles are supported:
|
| Hue | Used to adjust the hue of the Tab box, without changing the text color in the Tab box |
| Position | Used to adjust the position of the Tab bar, support Top, Bottom, Left and Right four |
| Button Font Size | Used to adjust the size of the text in the Tab box, and the size of the Tab box will be adaptively adjusted accordingly |
| Style | Used to set the text color in the Tab box, without changing the color of the Tab box |
An example of the display of the Tab bar buttons is shown in the following figure:
V. Auto carousel
Select "Carousel Component", click Interaction, the user can choose whether to enable Auto Carousel. As shown below:
"Auto Carousel" is enabled by default, and the default carousel interval is 6000 milliseconds.
If automatic carousel is not enabled, when previewing the page, the carousel component will display the first component in the carousel list by default. Users need to pass the carousel button to view other carousel content.
If automatic rotation is enabled, when previewing the page, the content of each component will be displayed cyclically according to the order of the carousel list and the carousel interval, but the automatic carousel cannot be paused.
VI. Completed template
For the completed template, see:
VII. Attention
1) The user can select the carousel component, copy and paste the carousel component and all the content in the carousel list.
Users cannot select a component in the carousel list and copy and paste it into the page separately.
2) The user can set the component content, component animation and component layout for the carousel component itself. Component interaction only supports "Carousel Settings", "Click Event" and "Monitor Refresh" are not supported.
Users can set component content and component interaction (“click event” and “monitor refresh”) for each component in the carousel list. Setting component animation and component layout is not supported.
3) When setting the linkage, it supports linkage to the carousel component itself, and supports linkage to each component in the carousel list.
4) The carousel component as a whole can be combined with other components to form a group. Individual components in a carousel component cannot be grouped.
Drag and drop carousel components/groups into carousel components is not supported.
