Empty空状态

2025-03-16 10:06:33首发，2天前更新

empty包括空内容和空标签时展示的样式或状态

Empty空状态 2天前更新

空状态

_empty标签即为空状态标签，置入一个图标或一行文字即可。

空状态通常用于请求内容失败或者为空时占位显示。

输出
HTML

正文

没有内容

正文

正文

没有内容
```
                
                
            
```

标准结构

本框架的空状态标签结构为：_empty > icon/label/actions/skip。

通过rep=icon、rep=label和rep=actions填充空状态内容。

输出
HTML

没有内容

搜一搜看一看

5s后自动跳转
```
                
                
            
```

图标

rep=icon标签放置指示图标或图片。通常使用<i class="_icon-empty"></i>即可。不过用户可以自行定义rep=icon的内容，比如使用一张图片。

输出
HTML

没有内容

没有内容
```
                
                
            
```

下一步

在rep=actions标签中可使用超链接或按钮，方便用户进行下一步操作。

输出
HTML

没有内容
```
                
                
            
```

空标签

与空内容相关的是空内容标签。当一个标签的内容为空时，我们通常需要隐藏该标签，在本框架通过使用_empty-*样式类隐藏空标签。隐藏的方式有三种：

_empty-hide：使用display:none隐藏标签，不可计算。
_empty-detach：使用positon:absolute隐藏标签，会脱离文档，但是保持原来位置，并且可计算。
_empty-collapse：使用height:0、width:0、padding:0、margin:0和border-width:0隐藏标签，可能有动画效果。

注意，这三个样式类对闭合标签无效，例如img、input等标签。

输出
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 = '正常显示的按钮';
                }