Tabs

The tabs component is a component based on TabGroup that can combine multiple other components for display in a tabbed manner. In the story editing interface, click “Tabs” in the toolbar’s insert area to create a tabs component on the current page. After selecting this component, edit its settings in the property editing panel on the right: Click the Add button in the tabs configuration table area to add a new tabs configuration row. Configuration properties are as follows:

Component Type: The component type used within a single tab. Currently supported:
- Analysis Card: Corresponds to chart analysis component;
- Analysis Table: Corresponds to analysis table component;
- Indicator Card: Corresponds to indicator card component;
- Financial Report: Corresponds to financial report component;

Style configuration: Style configuration includes general component style settings. Detailed tabs configuration:

Name	Description	Details
Disable Ripple	Disable ripple effect on tab labels
Keep Content	Keep tab content components	By default, tabs remove content from the DOM when it’s not on screen. Setting this to true will keep it in the DOM, which prevents elements like iframes and videos from reloading when they return to view.
Color	Theme color of the component
Animation Duration	Duration of label animation	If no unit is set, it will be normalized to milliseconds.
Alignment	Alignment of labels
Header Position	Position of tab headers
Disable Pagination	Whether pagination should be disabled	If pagination is known to be unnecessary, this can be used to avoid unnecessary layout recalculations

Component detailed configuration:

Name	Description	Details
Title	Tab title
Component Type	Component type displayed in the tab
Details	Detailed configuration for the corresponding component type	Configure in detail according to the selected component type. Refer to the corresponding component type configuration for specific settings. Remember to click the Submit button at the bottom after editing.
Disabled	Disable this tab

Default

Analysis Card

Analysis Table

Filter Bar

Input Controller

示例

​示例

示例