|
1. Overview 1.1 Function introduction This section describes how to use tabs, which can be used to save the space occupied by components after putting different components into the tabs. 1.2 Application scenario Use tab component to put multiple components together, switch back and forth to view, easy to compare and analyze. 2. Function 2.1 Add tab component Select Tab component and drag it to the canvas. 2.2 Configure component(add components to the tab) Select Setting > Component Setting > Configure Component on the right, select the components you need to configure in the Configure Component pop-up window, and click Add to "Selected Components", for example, to configure Chart 1: You can also directly select the component, drag it to the tab area, and release the mouse to configure it. If you need to add more than one component, you can directly select the components in turn and drag them to the tab component area, the interaction effect is shown below: 2.3 Component Setting Select Setting > Component Setting on the right side, you can also set padding size and whether to fit size. Padding Size: You can set the top, bottom, left and right margins respectively. Fit Size: Let the internal chart size adapt to tab, only table, chart, and combination are supported. If this option is checked, the size of table, pivot, freestyle table, form and chart change with the adjustment of the size of the tab components. If this option is not checked, the size of table, pivot, freestyle table, form and chart does not change with the size of the tabbed components. If this option is not checked, adjusting the size of the tab components requires that the components in the tabs be resized individually to allow the components to line up better. 2.4 Set Tab Name In the Configure Component pop-up window, click Label Name behind the component to set label name: Select Setting > Tab Setting on the right side and drop down to set the tab position and size. Position: The available values for tab position include "Top Left", "Top Center", "Top Right", "Left", "Right". Size: The size is the width and height of the tab. Available values include Auto, Equal Division, Customize. •Auto: the product will set the width and height according to the text content. •Split evenly: the product will split the tab width or height evenly according to the tab position, component height, tab interval, and number of tabs, where tab interval refer to the interval between two adjacent tabs. oEqual Division Width of the label: When the tab position is at the top (top left, top center, top right), you can customize the height, at this time the width is grayed out, the product will automatically divide the tab width equally. If there are n tabs, tab width = (component width - (n-1)* tab interval)/n, no longer show the horizontal scroll bar, if the width after equalization does not show the name of the tab, automatically show .... oEqual Division height of the label: When the tab position is on the left or right, you can customize the width, at this time the height is grayed out, the product will automatically divide the height of the label. If there are n labels, label height = (component height - (n-1)* label interval)/n, no longer show the vertical scroll bar, if the width after the equalization of the display is not under the name of the label, automatically show .... •Customize: user can input more according to the actual need. •Label interval: the interval between two adjacent labels. •Show Icon: Show the corresponding icons according to the chart type. If you need to set the format of label style and label area, please refer to Format for details. 2.5 Animation Tabs can be animated, select Setting > Animation on the right side, check carousel and set time, you can see the animation effect when previewing: •Top left •Top Right •Left 2.6 Remove component If you want to remove a component from a tab, you can select the selected component on the right side and click  to remove it; You can also directly select the component inside the tab, drag it to the outside of the tab area, and release the mouse to remove it. The moving effect is shown in the figure below:
| 
