Empty 空状态

一、概述

定义

由于网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生了空界面，这时候需要有明确的提示告知用户。

使用场景

• 出现无法正常加载内容时
• 告知用户当前页面出现空状态的原因

类型

• 提示
• 提示+操作

二、提示

仅用文字提示用户出现空数据页面的原因

交互说明

• 仅展示提示文字说明
• 空状态页面不可交互，提示语仅告知用户出现空状态的原因

<div class="se-demo-empty">
  <se-empty></se-empty>
</div>
<style>
  .se-demo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    margin: 0 auto;
    border: 1px solid #d0d0d0;
  }
</style>

三、提示+操作

告知用户出现空状态的原因，同时提供对应的操作

交互说明

• 空状态包含：标题，正文和操作按钮
• 用户可点击按钮进行交互操作

<div class="se-demo-custom-empty">
  <se-empty description="暂无评论">
    <div slot="content">
      <p>暂无评论，点击抢沙发</p>
      <se-button type="primary">抢沙发</se-button>
    </div>
  </se-empty>
</div>
<style>
  .se-demo-custom-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #d0d0d0;
  }
  .se-demo-custom-empty p {
    color: #999;
  }
</style>

Props