空状态 - Semi Design Next

代码演示

如何引入

import { Empty } from '@fibrous/semi-ui-react';

基本用法

通过 image 设置占位图片，可以从 @fibrous/semi-illustrations-react 中手动引入对应的插画（插画默认宽高是200x200），也可以传入自定义的插画。目前拥有的插画可以查看占位图插画。

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

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

功能建设中

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

代码

import { IllustrationConstruction, IllustrationConstructionDark } from '@fibrous/semi-illustrations-react';
import { Empty } from '@fibrous/semi-ui-react';

export default function EmptyDemo() {
    return <Empty image={<IllustrationConstruction style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />} title="功能建设中" description="当前功能暂未开放，敬请期待。" />;
}

自定义

描述内容使用 description 属性，children 放在描述下方的操作区。

空状态标题

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

代码

import { IllustrationNoContent, IllustrationNoContentDark } from '@fibrous/semi-illustrations-react';
import { Empty, Button } from '@fibrous/semi-ui-react';

export default function EmptyDemo() {
    return (
        <Empty image={<IllustrationNoContent style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />} title="空状态标题" description="开始创建你的第一个仪表盘吧！">
            <div>
                <Button style={{ padding: '6px 24px', marginRight: 12 }} type="primary">
                    二级按钮
                </Button>
                <Button style={{ padding: '6px 24px' }} theme="solid" type="primary">
                    一级按钮
                </Button>
            </div>
        </Empty>
    );
}

也可以不使用图片。

暂未找到匹配的筛选结果

试试重置筛选条件

代码

import { Empty, Typography } from '@fibrous/semi-ui-react';

export default function EmptyDemo() {
    return (
        <Empty
            title="暂未找到匹配的筛选结果"
            description={
                <span>
                    <Typography.Text>试试 </Typography.Text>
                    <Typography.Text link>重置筛选条件</Typography.Text>
                </span>
            }
        />
    );
}

不同布局

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

创建成功

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

代码

import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-react';
import { Empty, Button } from '@fibrous/semi-ui-react';

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

占位图插画(建设中)

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

创建成功

加载失败

没有权限

暂无内容，请添加

页面404

搜索无结果

建设中

神游四方

代码

import {
    IllustrationConstruction,
    IllustrationSuccess,
    IllustrationFailure,
    IllustrationNoAccess,
    IllustrationNoContent,
    IllustrationNotFound,
    IllustrationNoResult,
    IllustrationIdle,
    IllustrationIdleDark,
    IllustrationConstructionDark,
    IllustrationSuccessDark,
    IllustrationFailureDark,
    IllustrationNoAccessDark,
    IllustrationNoContentDark,
    IllustrationNotFoundDark,
    IllustrationNoResultDark,
} from '@fibrous/semi-illustrations-react';
import { Empty } from '@fibrous/semi-ui-react';

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

API 参考

Props

属性	说明	类型	默认值
children	描述下方的操作区内容，如按钮。	`React.ReactNode`	-
className	根元素的类名。	`string`	-
darkModeImage	暗色模式下的占位图，跟随 document.body 的 theme-mode 属性变化；取值同 image。	`React.ReactNode \| SVGNode`	-
description	描述内容，显示在标题下方。	`React.ReactNode`	-
image	占位图，可以是 ReactNode（如插画组件）、图片地址字符串，或 `{ id }` 形式的页面内 SVG sprite 符号；空字符串视为没有图片。	`React.ReactNode \| SVGNode`	-
imageStyle	占位图区域的内联样式，类型为 `CSSProperties`。	`React.CSSProperties`	-
layout	布局模式，可选 `vertical` 或 `horizontal`。	`'vertical' \| 'horizontal'`	`"vertical"`
ref	根 `div` 元素的引用。	`Type`	-
style	根元素的内联样式。	`React.CSSProperties`	-
title	标题，按标题样式渲染，可以是任意 ReactNode。	`React.ReactNode`	-

其他原生属性（如 id、aria-*）落在根元素 div 上。

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)	描述文字颜色