空状态 Empty - Svelte - Semi Design Next

代码演示

如何引入

<script lang="ts">
    import { Empty } from '@fibrae/semi-ui-svelte';
</script>

基本用法

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

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

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

功能建设中

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

代码

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

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

{#snippet image()}<IllustrationConstruction style={imageStyle} />{/snippet}
{#snippet darkModeImage()}<IllustrationConstructionDark style={imageStyle} />{/snippet}

<Empty {darkModeImage} {image} title="功能建设中">
    {#snippet description()}当前功能暂未开放，敬请期待。{/snippet}
</Empty>

自定义

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

空状态标题

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

代码

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

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

{#snippet image()}<IllustrationNoContent style={imageStyle} />{/snippet}
{#snippet darkModeImage()}<IllustrationNoContentDark style={imageStyle} />{/snippet}

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

也可以不使用图片。

暂未找到匹配的筛选结果

试试重置筛选条件

代码

<script lang="ts">
    import { Empty, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

<Empty title="暂未找到匹配的筛选结果">
    {#snippet description()}
        <span>
            <TypographyText>试试</TypographyText>
            <TypographyText link>重置筛选条件</TypographyText>
        </span>
    {/snippet}
</Empty>

不同布局

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

创建成功

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

代码

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

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

{#snippet image()}<IllustrationSuccess style={imageStyle} />{/snippet}
{#snippet darkModeImage()}<IllustrationSuccessDark style={imageStyle} />{/snippet}

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

占位图插画(建设中)

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

创建成功

加载失败

没有权限

暂无内容，请添加

页面404

搜索无结果

建设中

神游四方

代码

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

    type Illustration = Component<{ style?: string }>;

    const emptyStyle = 'padding: 30px';
    const imageStyle = 'width: 150px; height: 150px';
    const items: { Light: Illustration; Dark: Illustration; text: string }[] = [
        { Light: IllustrationSuccess, Dark: IllustrationSuccessDark, text: '创建成功' },
        { Light: IllustrationFailure, Dark: IllustrationFailureDark, text: '加载失败' },
        { Light: IllustrationNoAccess, Dark: IllustrationNoAccessDark, text: '没有权限' },
        { Light: IllustrationNoContent, Dark: IllustrationNoContentDark, text: '暂无内容，请添加' },
        { Light: IllustrationNotFound, Dark: IllustrationNotFoundDark, text: '页面404' },
        { Light: IllustrationNoResult, Dark: IllustrationNoResultDark, text: '搜索无结果' },
        { Light: IllustrationConstruction, Dark: IllustrationConstructionDark, text: '建设中' },
        { Light: IllustrationIdle, Dark: IllustrationIdleDark, text: '神游四方' },
    ];
</script>

<div style="display: flex; flex-wrap: wrap">
    {#each items as { Light, Dark, text } (text)}
        <Empty style={emptyStyle}>
            {#snippet image()}<Light style={imageStyle} />{/snippet}
            {#snippet darkModeImage()}<Dark style={imageStyle} />{/snippet}
            {#snippet description()}{text}{/snippet}
        </Empty>
    {/each}
</div>

API 参考

Props

属性	说明	类型	默认值
children	描述下方的操作区。	`Snippet`	-
darkModeImage	暗色模式下的占位图，跟随 document.body 的 theme-mode 变化；取值同 image。	`EmptyImage`	-
description	描述内容。	`Snippet`	-
image	占位图：图片地址字符串、`{ id }` 形式的页面内 SVG sprite 符号，或任意内容的 snippet；空字符串视为没有图片。	`EmptyImage`	-
imageStyle	占位图容器的样式字符串。	`string`	-
layout	布局模式，可选 vertical、horizontal。	`EmptyLayout`	`"vertical"`
title	标题，字符串或 snippet。	`string \| Snippet`	-

class、style 与原生属性落在根元素 div 上。title、description、image、darkModeImage、imageStyle 与 layout 是组件属性，不会落到根元素上。暗色模式下，只有传了 darkModeImage 的 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)	描述文字颜色