Empty 空状态
v2.0.6+

空数据占位组件，纯 CSS 实现。常用于列表/表格无数据时展示。

基础用法

  • Preview
  • Code
暂无数据
您可以尝试刷新或创建新条目
<div class="bny-empty">
    <div class="bny-empty-icon">
        <svg>...</svg>
    </div>
    <div class="bny-empty-desc">暂无数据</div>
    <div class="bny-empty-sub">您可以尝试刷新</div>
    <div class="bny-empty-actions">
        <button class="bny-btn">刷新</button>
    </div>
</div>

主题色 + 尺寸

  • Preview
  • Code
无搜索结果
网络异常
任务完成
<div class="bny-empty is-sm" color="blue">
    <div class="bny-empty-icon">
        <i class="bny-icon icon-question-circle"></i>
    </div>
    <div class="bny-empty-desc">无搜索结果</div>
</div>

<div class="bny-empty" color="yellow">
    <div class="bny-empty-icon">
        <i class="bny-icon icon-error"></i>
    </div>
    <div class="bny-empty-desc">网络异常</div>
</div>

<div class="bny-empty is-sm" color="green">
    <div class="bny-empty-icon">
        <i class="bny-icon icon-check"></i>
    </div>
    <div class="bny-empty-desc">任务完成</div>
</div>

简洁模式

  • Preview
  • Code
— 没有更多内容 —
<div class="bny-empty is-simple">
    <div class="bny-empty-desc">— 没有更多内容 —</div>
</div>

API

CSS 类

类名/属性说明
bny-empty容器
bny-empty-icon图标区
bny-empty-desc主描述
bny-empty-sub副描述
bny-empty-actions操作按钮区
is-sm / is-lg尺寸变体
is-simple简洁模式（仅文字）
color="green/blue/yellow/red"主题色变体