Skip to main content
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:
NameDescriptionDetails
Disable RippleDisable ripple effect on tab labels
Keep ContentKeep tab content componentsBy 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.
ColorTheme color of the component
Animation DurationDuration of label animationIf no unit is set, it will be normalized to milliseconds.
AlignmentAlignment of labels
Header PositionPosition of tab headers
Disable PaginationWhether pagination should be disabledIf pagination is known to be unnecessary, this can be used to avoid unnecessary layout recalculations
Component detailed configuration:
NameDescriptionDetails
TitleTab title
Component TypeComponent type displayed in the tab
DetailsDetailed configuration for the corresponding component typeConfigure 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.
DisabledDisable this tab

示例