Home›Docs›Data›Stats Component

Stats Component

Last updated: 1 month ago

Category: Data

The stats component primarily highlights numerical values and can be enriched with properties like icon, disk, tips, and unit to enhance its content. It supports common operations such as reset and set.

Stats Component1 month ago

Basic Usage

Use the oc-stats tag to display statistical numeric data. The number can be specified in the label attribute or directly within the tag content.

Output
HTML

824
```
                
                
            
```

Using Tips

The tips attribute provides explanatory text for the number.

Output
HTML

824
```
                
                
            
```

Using Units

The unit attribute specifies the unit of measurement for the number.

Output
HTML

824
```
                
                
            
```

Using Badges

The badge attribute adds a badge bubble to the number.

Output
HTML

824
```
                
                
            
```

Using Legends

Legends (visual indicators before the number) come in four types: icon, disk, cube, and image. Only one type can be used at a time.

icon: Displays an icon using a style class (e.g., icon="_icon-global")
disk: Displays a circular image (provide image URL)
cube: Displays a square image (provide image URL)
image: Displays a regular image (provide image URL)

Output
HTML

824 824 824 824
```
                
                
            
```

Horizontal Layout

By default the dir attribute is 'v' for vertical layout. Use dir="h" to switch to horizontal layout.

Output
HTML

824
```
                
                
            
```

Flipped Layout

When using the tips attribute in vertical layout, the flipped attribute swaps the positions of the number and tips vertically.

Output
HTML

824
```
                
                
            
```

Combination Example 1

Combination Example 2

Combination Example 3

Combination Example 4

Combination Example 5

Combination Example 6

Attributes

Attribute	Type	Values	Default	Description
disabled	boolean	-	-	Whether disabled
flipped	boolean	-	-	Whether to use reversed vertical layout
dir	string	'h'/'v'	'h'	Layout direction
badge	string	-	-	Badge text
label	string	-	-	Main title
unit	string	-	-	Unit text
tips	string	-	-	Help text
cube	string	-	-	Square image URL
disk	string	-	-	Circular image URL
image	string	-	-	Regular image URL
icon	string	-	-	Icon class name

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

Result Component

1 month ago

CSS Grade Menu