空状态 - Semi Design Next

代码演示

如何引入

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

基本用法

通过 image 设置占位图片，可以从 @fibrous/semi-illustrations-solid 中手动引入对应的插画（插画默认宽高是200x200），也可以传入自定义的 JSX 元素。目前拥有的插画可以查看占位图插画。image 还接受图片地址字符串，以及 { id } 形式的 SVG sprite 符号。

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

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

功能建设中

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

代码

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

const illustrationStyle = { width: '150px', height: '150px' };

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

自定义

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

空状态标题

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

代码

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

const illustrationStyle = { width: '150px', height: '150px' };

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

也可以不使用图片。

暂未找到匹配的筛选结果

试试重置筛选条件

代码

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

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-solid';
import { Button, Empty } from '@fibrous/semi-ui-solid';

const illustrationStyle = { width: '150px', height: '150px' };

export default function EmptyDemo() {
    return (
        <Empty
            title="创建成功"
            image={<IllustrationSuccess style={illustrationStyle} />}
            darkModeImage={<IllustrationSuccessDark style={illustrationStyle} />}
            layout="horizontal"
            description="这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。"
            style={{ width: '800px', 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,
    IllustrationConstructionDark,
    IllustrationFailure,
    IllustrationFailureDark,
    IllustrationIdle,
    IllustrationIdleDark,
    IllustrationNoAccess,
    IllustrationNoAccessDark,
    IllustrationNoContent,
    IllustrationNoContentDark,
    IllustrationNotFound,
    IllustrationNotFoundDark,
    IllustrationNoResult,
    IllustrationNoResultDark,
    IllustrationSuccess,
    IllustrationSuccessDark,
} from '@fibrous/semi-illustrations-solid';
import { Empty } from '@fibrous/semi-ui-solid';

const emptyStyle = { padding: '30px' };
const illustrationStyle = { width: '150px', height: '150px' };

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

API 参考

Props

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

class、style、ref 与原生属性落在根元素 div 上。title、description、image、darkModeImage、imageStyle 与 layout 是组件属性，不会落到根元素上。

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