Empty - Svelte - Semi Design Next

Demos

How to import

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

Basic usage

By setting a placeholder image with image, you can manually import the corresponding illustration from @fibrae/semi-illustrations-svelte (the default width and height of the illustration is 200x200) and pass it as a snippet, or pass a snippet with any custom content. image also accepts an image URL string, or an SVG sprite symbol as { id }.

A series of dark mode illustrations are added, and the illustrations that need to be used in dark mode can be passed in through darkModeImage to better adapt to the dark mode.

An empty string image counts as no image, and the title is laid out as if there were none.

功能建设中

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

Code

<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>

Custom content

Description content goes in the description snippet, and children is the actions area below it.

空状态标题

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

Code

<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>

It is not necessary to use pictures.

暂未找到匹配的筛选结果

试试重置筛选条件

Code

<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>

Different layout

Two types of layouts are supported: vertical, horizontal. The default is vertical.

创建成功

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

Code

<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>

Placeholder illustration (under construction)

Currently the following illustrations are supported in @fibrae/semi-illustrations-react (@fibrae/semi-illustrations-vue for Vue, @fibrae/semi-illustrations-svelte for Svelte).

创建成功

加载失败

没有权限

暂无内容，请添加

页面404

搜索无结果

建设中

神游四方

Code

<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 reference

Props

Property	Description	Type	Default
children	Actions below the description.	`Snippet`	-
darkModeImage	Placeholder image in dark mode, following the theme-mode attribute of document.body. Takes the same values as image.	`EmptyImage`	-
description	Description content.	`Snippet`	-
image	Placeholder image: an image URL, an in-page SVG sprite symbol as `{ id }`, or a snippet for any other content. An empty string counts as no image.	`EmptyImage`	-
imageStyle	Style string of the placeholder image box.	`string`	-
layout	Layout mode: vertical or horizontal.	`EmptyLayout`	`"vertical"`
title	Title, a string or a snippet.	`string \| Snippet`	-

class, style and native attributes land on the root div element. title, description, image, darkModeImage, imageStyle and layout are component props and do not land on the root element. In dark mode, only an Empty given a darkModeImage observes the theme-mode of document.body after mount; server rendering and hydration use the light image.

Accessibility

ARIA

Empty illustrations are decorative: an SVG illustration has aria-hidden="true", and an img rendered from an image URL has an empty alt
title is styled as a heading but rendered as a div without heading semantics, so it does not disturb the page's heading levels

Content Guidelines

Title
- The title should be concise and easy to understand
Text
- The specific reasons for displaying the empty state can be displayed, and the subsequent operation behavior can also be displayed to help the user eliminate the empty state
- Don't repeat the content on the title
- Try to keep the body text within 1-2 sentences
Action button
- Button copy needs to be clear and easy to understand
- Use the verb + noun format

Design Token

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$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)	描述文字颜色

Demos

How to import

Basic usage

Custom content

Different layout

Placeholder illustration (under construction)

API reference

Accessibility

ARIA

Content Guidelines

Design Token

FAQ