Home›Docs›Data›Result Component

Result Component

Last updated: 1 month ago

Category: Data

The result component is the final evolved form of a buffer. It can display four types of outcomes: info, success, error, and warning, presented either as SVG animations or static icons.

Progress Component: Property and Method Usage Examples1 month ago Progress Component1 month ago Progress Library: Animation and Control Examples1 month ago Progress Library: Visual Style Examples1 month ago Progress Library1 month ago Result Component1 month ago Step Component: How to Use Data and Customize Styles1 month ago Step Component1 month ago

Introduction

The spin component primarily displays the loading process, while this result component shows the complete dynamic process from start to finish with more fluid animations.

Without any attributes (or without the to attribute), it behaves the same as the spin loading component.

Output
HTML

```
                
                
            
```

Displaying Results

Add the to attribute to automatically transition to a specific state. Available values:

succ: Success state
error: Error or failure state
info: General information state
warn: Warning or alert state

Output
HTML

```
                
                
            
```

Icon Types

By default, the result component uses SVG icons with animations. For static display, set type=font to use iconfont icons instead.

Output
HTML

```
                
                
            
```

Icon Styles

When using type=font, there are three icon styles available via the shape attribute:

thick: Thin line icons
thin: Thick line icons (default)
fill: Solid filled icons

Output
HTML

```
                
                
            
```

Text

Set result text via the label attribute or place text directly within the tag.

Output
HTML

Error!
```
                
                
            
```

Interactive Demo

An example demonstrating the result component's state changes.

Attributes

Name	Values	Default	Description
type	'svg'/'font'	'svg'	Icon type - default SVG
to	'error'/'succ'/'info'/'warn'	-	Result state - default info
shape	'thin'/'thick'/'fill'	'thick'	Icon style (only when type=font)
label	''	-	Text below icon

Common 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()

Common 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

Buoy Component

1 month ago

Stats Component