Group Flex

Last updated: 4 months ago

Category: Basic

Flex groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Overview

The Flex Tab Group is primarily designed for switching between content sections and serves as a critical component of the Tab module.

Basic Implementation Steps:

1. Establish parent-child structure relationship
2. Parent node: Use the _group-flex CSS class
3. Child nodes: Wrap content with rep="label" containers

Key Characteristics:

1. Indicator bar spans the full width of child nodes
2. Mandatory use of rep="label" tags (ensures full-width expansion of child nodes)

Basic Usage

Parent and child nodes can be any HTML tags, with special support for ul+li and ol+li structures.

Disabled State

Simply add the disabled attribute to child nodes.

Tool Integration

rep="tools" represents tool nodes where custom action buttons can be placed. Typically we use the orca.createTools utility function to create tool sets.

Special handling is applied to rep="remove" tools: they turn red on mouse hover.

Helper Text

Flex tabs support rep="tips" tags for additional descriptive text.

Full-Width Flex Layout

Flex tab groups can be embedded within flex layouts to achieve full-width parent container coverage.

Indicator Graphics

Tab headers support three types of indicator graphics:

• rep="icon": Font icons
• rep="disk": Circular images
• rep="cube": Square images
• rep="image": Images with unrestricted dimensions (except height)

Custom Containers

Flex tab groups are typically not used standalone, but rather integrated with other modules or components like the Tab module.

We can leverage the framework's built-in styles to create custom content sections with _group-flex.

Sizing Options

Control height with size attribute:

• xs (24px)
• sm (32px)
• md (40px, default)
• lg (48px)