Group Page

Last updated: 1 month ago

Category: Basic

Tab 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.

Group Page1 month ago Group Flex1 month ago Group Button1 month ago

Overview

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

Basic Implementation Steps:

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

Basic Usage

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

Output
HTML

div + div

Japan

South Korea

Germany

France

ul + li
```
                
                
            
```

Disabled State

Simply add the disabled attribute to child nodes.

Output
HTML

Japan

South Korea

Germany

France
```
                
                
            
```

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.

Output
HTML

Japan

South Korea

Germany

France
```
                
                
            
```

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)

Output
HTML

JapanInnovation & Heritage

South KoreaTech & Culture

GermanyEngineering & Stability

FranceCulture & Elegance
```
                
                
            
```

Additional Content

Tab headers support more content types:

rep="tips": Helper text
oc-badge tag: Notification badges

Output
HTML

JapanJP

South KoreakR3

GermanyGR

FranceFR
```
                
                
            
```

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-page.

Output
HTML

Japan

South Korea

Germany

France

Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.
```
                
                
            
```

Sizing Options

Control height with size attribute:

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

Output
HTML

Japan

South Korea

Germany

France

Japan

South Korea

Germany

France

Japan

South Korea

Germany

France

Japan

South Korea

Germany

France
```
                
                
            
```