空状态 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Empty } from '@fibrous/semi-ui-vue';
</script>

基本用法

通过 #image 插槽设置占位图片，可以从 @fibrous/semi-illustrations-vue 中手动引入对应的插画（插画默认宽高是200x200），也可以放入自定义的插画。目前拥有的插画可以查看占位图插画。image 属性只接收图片地址字符串或 { id }。

增加一系列暗色模式的插画，并支持通过 #darkModeImage 插槽放入暗色模式下需要使用的插画，以更好地适配暗色模式。

image 传入空字符串时视为没有图片，标题按无图片排版。

功能建设中

当前功能暂未开放，敬请期待。

代码

<script setup lang="ts">
    import { IllustrationConstruction, IllustrationConstructionDark } from '@fibrous/semi-illustrations-vue';
    import { Empty } from '@fibrous/semi-ui-vue';

    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Empty title="功能建设中">
        <template #image>
            <IllustrationConstruction :style="imageStyle" />
        </template>
        <template #darkModeImage>
            <IllustrationConstructionDark :style="imageStyle" />
        </template>
        <template #description>当前功能暂未开放，敬请期待。</template>
    </Empty>
</template>

自定义

描述内容使用 #description 插槽，默认插槽用于描述下方的操作区。

空状态标题

开始创建你的第一个仪表盘吧！

代码

<script setup lang="ts">
    import { IllustrationNoContent, IllustrationNoContentDark } from '@fibrous/semi-illustrations-vue';
    import { Button, Empty } from '@fibrous/semi-ui-vue';

    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Empty title="空状态标题">
        <template #image>
            <IllustrationNoContent :style="imageStyle" />
        </template>
        <template #darkModeImage>
            <IllustrationNoContentDark :style="imageStyle" />
        </template>
        <template #description>开始创建你的第一个仪表盘吧！</template>
        <div>
            <Button :style="{ padding: '6px 24px', marginRight: '12px' }" type="primary">二级按钮</Button>
            <Button :style="{ padding: '6px 24px' }" theme="solid" type="primary">一级按钮</Button>
        </div>
    </Empty>
</template>

也可以不使用图片。

暂未找到匹配的筛选结果

试试重置筛选条件

代码

<script setup lang="ts">
    import { Empty, Typography } from '@fibrous/semi-ui-vue';

    const { Text } = Typography;
</script>

<template>
    <Empty title="暂未找到匹配的筛选结果">
        <template #description>
            <span>
                <Text>试试 </Text>
                <Text link>重置筛选条件</Text>
            </span>
        </template>
    </Empty>
</template>

不同布局

支持 2 种类型的布局：vertical、horizontal。默认为 vertical。

创建成功

这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。

代码

<script setup lang="ts">
    import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-vue';
    import { Button, Empty } from '@fibrous/semi-ui-vue';

    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Empty layout="horizontal" :style="{ width: '800px', margin: '0 auto' }" title="创建成功">
        <template #image>
            <IllustrationSuccess :style="imageStyle" />
        </template>
        <template #darkModeImage>
            <IllustrationSuccessDark :style="imageStyle" />
        </template>
        <template #description> 这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。 </template>
        <Button :style="{ padding: '6px 24px' }" theme="solid" type="primary">开始操作</Button>
    </Empty>
</template>

占位图插画(建设中)

目前 @fibrous/semi-illustrations-react（Vue 为 @fibrous/semi-illustrations-vue）中支持以下插画。

创建成功

加载失败

没有权限

暂无内容，请添加

页面404

搜索无结果

建设中

神游四方

代码

<script setup lang="ts">
    import {
        IllustrationConstruction,
        IllustrationConstructionDark,
        IllustrationFailure,
        IllustrationFailureDark,
        IllustrationIdle,
        IllustrationIdleDark,
        IllustrationNoAccess,
        IllustrationNoAccessDark,
        IllustrationNoContent,
        IllustrationNoContentDark,
        IllustrationNotFound,
        IllustrationNotFoundDark,
        IllustrationNoResult,
        IllustrationNoResultDark,
        IllustrationSuccess,
        IllustrationSuccessDark,
    } from '@fibrous/semi-illustrations-vue';
    import { Empty } from '@fibrous/semi-ui-vue';

    const emptyStyle = { padding: '30px' };
    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <div :style="{ display: 'flex', flexWrap: 'wrap' }">
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationSuccess :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationSuccessDark :style="imageStyle" />
            </template>
            <template #description>创建成功</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationFailure :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationFailureDark :style="imageStyle" />
            </template>
            <template #description>加载失败</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationNoAccess :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationNoAccessDark :style="imageStyle" />
            </template>
            <template #description>没有权限</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationNoContent :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationNoContentDark :style="imageStyle" />
            </template>
            <template #description>暂无内容，请添加</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationNotFound :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationNotFoundDark :style="imageStyle" />
            </template>
            <template #description>页面404</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationNoResult :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationNoResultDark :style="imageStyle" />
            </template>
            <template #description>搜索无结果</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationConstruction :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationConstructionDark :style="imageStyle" />
            </template>
            <template #description>建设中</template>
        </Empty>
        <Empty :style="emptyStyle">
            <template #image>
                <IllustrationIdle :style="imageStyle" />
            </template>
            <template #darkModeImage>
                <IllustrationIdleDark :style="imageStyle" />
            </template>
            <template #description>神游四方</template>
        </Empty>
    </div>
</template>

API 参考

Props

属性	说明	类型	默认值
layout	布局模式，可选 vertical、horizontal。	`"vertical" \| "horizontal"`	`semiDefault("Empty", "layout", "vertical")`
imageStyle	占位图的样式。	`CSSProperties`	`semiGlobalDefault("Empty", "imageStyle")`
title	纯文本标题；同时传入 title 插槽时以插槽为准。	`string`	`semiGlobalDefault("Empty", "title")`
image	占位图的 URL，或 `{ id }` 形式的页面内 SVG sprite 符号；空字符串视为没有图片。其他内容使用 image 插槽。	`string \| EmptySvgNode`	`semiGlobalDefault("Empty", "image")`
darkModeImage	暗色模式下的占位图，跟随 document.body 的 theme-mode 变化；取值同 image。	`string \| EmptySvgNode`	`semiGlobalDefault("Empty", "darkModeImage")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	描述下方的操作区。	`any`
title	自定义标题，优先于 title 属性。	`any`
description	描述内容。	`any`
image	自定义占位图，优先于 image 属性。	`any`
darkModeImage	暗色模式下的自定义占位图，优先于 darkModeImage 属性。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 传入根元素。title 是组件属性，不会作为 HTML 属性落到根元素。暗色模式下，每个 Empty 在挂载后观察 document.body 的 theme-mode，服务端渲染与激活时使用亮色图片。

Accessibility

ARIA

Empty 插图是装饰性的：SVG 插图的 aria-hidden 为 true，图片地址渲染的 img 的 alt 为空
title 按标题样式渲染，但元素是 div，不带标题语义，不会打乱页面的标题层级

文案规范

标题
- 标题应该简洁易懂
正文
- 可以展示展示空状态的具体原因，也可以展示后续的操作行为去帮助用户消除空状态
- 不要重复标题上的内容
- 尽量保持正文在 1-2 句话内
动作按钮
- 按钮文案需要足够清晰和容易理解
- 使用动词 + 名词的格式

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$spacing-empty_content_vertical-marginTop	24px	垂直布局内容顶部外边距
$spacing-empty_content_horizontal-marginLeft	32px	水平布局内容左侧外边距
$spacing-empty_title-marginTop	16px	标题内容顶部外边距
$spacing-empty_footer-marginTop	24px	操作 footer 顶部外边距
$font-empty_title-fontWeight	600	标题字重
$color-empty_description-text-default	var(--semi-color-text-1)	描述文字颜色