Home›Docs›Basic›Category Component

Category Component

Last updated: 4 months ago

Category: Basic

The category component is used to create section titles. It can be used for large sections on a page or small sections in a sidebar, serving to separate adjacent sections and indicate the main content of the current section.

Category Component4 months ago

Introduction

Section headers are commonly used in web pages. This component helps quickly create well-styled section headers.

Basic Usage

The <oc-category> tag with a label attribute creates a section header.

Output
HTML

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

Using Icons

The icon attribute accepts any valid icon class name to display an icon.

Output
HTML

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

Using Images

Image attributes include:

disk: Circular image
cube: Square image
image: Regular image (height only)

Note: Only one of these image attributes should be used (they are mutually exclusive).

Output
HTML

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

Using Indicator Arrows

The arrow attribute enables a right-pointing indicator arrow. Custom arrow icons can be specified by providing an icon class name.

Output
HTML

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

Using Tips

The tips attribute adds supplementary text at the end of the header.

Output
HTML

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

Theme Styles

The theme attribute supports these style options:

prim: Primary color
succ: Success green
warn: Warning orange
error: Error red
issue: Issue purple
info: Info blue
text: Text color

Output
HTML

```
                
                
            
```

Attributes

Attribute	Type	Values	Default	Description
icon	string	''	''	Icon class name
disk	string	''	''	Circular image URL
cube	string	''	''	Square image URL
image	string	''	''	Regular image URL
arrow	string/boolean	-	false	Enable indicator arrow
label	string	''	''	Header text
tips	string	''	''	Supplementary text
theme	string	'prim'/'error'/'succ'/'info'/'issue'/'warn'/'text'	''	Color theme

Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

Good Component

4 months ago

Text Format Component