Components
    Show · Empty

    Empty

    Placeholder component when the page is empty.

    Demos

    How to import

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

    Basic usage

    Set a placeholder image with the #image slot. You can manually import the corresponding illustration from @fibrous/semi-illustrations-vue (the default width and height of the illustration is 200x200), or put in a custom illustration. The image prop only takes an image URL string or { id }.

    A series of dark mode illustrations are added, and the illustrations that need to be used in dark mode can be put in the #darkModeImage slot 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 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>

    Custom content

    Description content goes in the #description slot, and the default slot is the actions area below it.

    空状态标题
    开始创建你的第一个仪表盘吧！
    Code
    <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>

    It is not necessary to use pictures.

    暂未找到匹配的筛选结果
    试试 重置筛选条件
    Code
    <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>

    Different layout

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

    创建成功
    这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。
    Code
    <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>

    Placeholder illustration (under construction)

    Currently the following illustrations are supported in @fibrous/semi-illustrations-react (@fibrous/semi-illustrations-vue for Vue).

    创建成功
    加载失败
    没有权限
    暂无内容，请添加
    页面404
    搜索无结果
    建设中
    神游四方
    Code
    <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 reference

    Props

    PropertyDescriptionTypeDefault
    layoutLayout mode: vertical or horizontal."vertical" | "horizontal"semiDefault("Empty", "layout", "vertical")
    imageStyleStyle of the placeholder image.CSSPropertiessemiGlobalDefault("Empty", "imageStyle")
    titlePlain-text title. The title slot wins when both are given.stringsemiGlobalDefault("Empty", "title")
    imagePlaceholder image URL, or an in-page SVG sprite symbol as { id }. An empty string counts as no image. Use the image slot for other content.string | EmptySvgNodesemiGlobalDefault("Empty", "image")
    darkModeImagePlaceholder image in dark mode, following the theme-mode attribute of document.body. Takes the same values as image.string | EmptySvgNodesemiGlobalDefault("Empty", "darkModeImage")

    Events

    EventDescriptionCallback parameters
    None

    Slots

    SlotDescriptionScope parameters
    defaultActions below the description.any
    titleCustom title, preferred over the title prop.any
    descriptionDescription content.any
    imageCustom placeholder image, preferred over the image prop.any
    darkModeImageCustom placeholder image in dark mode, preferred over the darkModeImage prop.any

    Exposes

    NameDescriptionType
    None

    class, style and native attributes are passed through attrs to the root element. title is a component prop and does not land on the root element as an HTML attribute. In dark mode every Empty observes theme-mode on document.body after mount; server render 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 variableValueUsage
    $spacing-empty_content_vertical-marginTop24px垂直布局内容顶部外边距
    $spacing-empty_content_horizontal-marginLeft32px水平布局内容左侧外边距
    $spacing-empty_title-marginTop16px标题内容顶部外边距
    $spacing-empty_footer-marginTop24px操作 footer 顶部外边距
    $font-empty_title-fontWeight600标题字重
    $color-empty_description-text-defaultvar(--semi-color-text-1)描述文字颜色

    FAQ