Home›Docs›Basic›Empty State

Empty State

Last updated: 13 days ago

Category: Basic

Empty includes styles or states displayed for blank content or empty tags

Empty State13 days ago

Empty State Styles

The _empty tag represents an empty state tag, which can contain an icon or a line of text.

Empty states are typically used as placeholders when requested content fails or is empty.

Output
HTML

Main content

No content

Main content

Main content

No content
```
                
                
            
```

Standard Structure

The empty state tag structure in this framework is: _empty > icon/label/actions/skip.

Fill the empty state content using rep=icon, rep=label and rep=actions.

Output
HTML

No content

Search Browse

Auto redirect in 5s
```
                
                
            
```

Icons

The rep=icon tag holds indicator icons or images. Typically <i class="_icon-empty"></i> is sufficient. However, users can customize the rep=icon content, such as using an image.

Output
HTML

No content

No content
```
                
                
            
```

Next Steps

Use hyperlinks or buttons in the rep=actions tag to facilitate user next steps.

Output
HTML

No content
```
                
                
            
```

Empty Tags

Related to empty content are empty content tags. When a tag's content is empty, we typically need to hide it. This framework uses _empty-* style classes to hide empty tags. There are three hiding methods:

_empty-hide: Uses display:none to hide the tag (not measurable in layout)
_empty-detach: Uses position:absolute to hide the tag (detaches from document flow but maintains position and remains measurable)
_empty-collapse: Uses height:0, width:0, padding:0, margin:0 and border-width:0 to hide the tag (may have animation effects)

Note: These three style classes don't work on self-closing tags like img, input, etc.

Output
HTML
JS

```
                
                
            
```

                
                let demo0001 = document.querySelector('#demo0001');
                demo0001btn01.onclick = ()=>{
                    demo0001.setAttribute('class','_empty-hide');
                    demo0001.innerHTML = '';
                }
                demo0001btn02.onclick = ()=>{
                    demo0001.setAttribute('class','_empty-detach');
                    demo0001.innerHTML = '';
                }
                demo0001btn03.onclick = ()=>{
                    demo0001.setAttribute('class','_empty-collapse');
                    demo0001.innerHTML = '';
                }
                demo0001btn04.onclick = ()=>{
                    demo0001.innerHTML = 'Normally displayed button';
                }