ChuFix UI v0.2.1
Preview Updated 2026-05-10

Empty

Placeholder for empty lists, tables, or search results. Supports an action button and three sizes.

Basic usage

Without any props, shows the default icon and “No data”.

背景
暂无数据
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
<CfEmpty />
<CfEmpty />

Custom text

title is the main message, description is the secondary message. Both are available as a prop or a slot of the same name.

背景
还没有项目
创建你的第一个项目来开始使用础件。
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
/>
<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
/>

Action button

The action slot (Vue) / action prop (React) is for a navigation or “create” button — give the user a path back from the empty state.

背景
还没有项目
创建你的第一个项目来开始使用础件。
 
<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
action={<CfButton variant="primary" size="sm">+ New project</CfButton>}
/>
<CfEmpty
title="No projects yet"
description="Create your first project to get started with ChuFix."
action={<CfButton variant="primary" size="sm">+ New project</CfButton>}
/>

Status illustrations

The default icon comes from CfStatusIllustration. You can swap it for search, upload, error, etc. via the icon slot (Vue) / icon prop (React).

背景
没有搜索结果
换个关键词或清空筛选条件试试。
还没有文件
拖拽文件到这里，或点击上传。
 
<script setup lang="ts">
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>

<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>

<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
<script setup>
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>

<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>

<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
<CfEmpty
title="No matching results"
description="Try a different keyword or clear the filters."
icon={<CfStatusIllustration variant="search" />}
/>

<CfEmpty
title="No files yet"
description="Drop files here, or click to upload."
icon={<CfStatusIllustration variant="upload" />}
/>
<CfEmpty
title="No matching results"
description="Try a different keyword or clear the filters."
icon={<CfStatusIllustration variant="search" />}
/>

<CfEmpty
title="No files yet"
description="Drop files here, or click to upload."
icon={<CfStatusIllustration variant="upload" />}
/>

Custom image

For full-page empty states, pass image to use a product illustration, generated image, business SVG, or CDN image. For compact icons, keep using the icon slot / prop.

背景
还没有发布记录
可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。
 
<script setup lang="ts">
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <rect x="26" y="34" width="108" height="82" rx="14" fill="#EEF6FF" stroke="#8BBDF8" stroke-width="4"/>
  <path d="M48 58h64M48 78h42M48 98h56" stroke="#2F7DDD" stroke-width="7" stroke-linecap="round"/>
  <circle cx="118" cy="112" r="22" fill="#EAFBF1" stroke="#20A464" stroke-width="4"/>
  <path d="M108 112l7 7 14-16" stroke="#10824D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>

<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <rect x="26" y="34" width="108" height="82" rx="14" fill="#EEF6FF" stroke="#8BBDF8" stroke-width="4"/>
  <path d="M48 58h64M48 78h42M48 98h56" stroke="#2F7DDD" stroke-width="7" stroke-linecap="round"/>
  <circle cx="118" cy="112" r="22" fill="#EAFBF1" stroke="#20A464" stroke-width="4"/>
  <path d="M108 112l7 7 14-16" stroke="#10824D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>

<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<CfEmpty
title="No releases yet"
description="Pass image for a product-specific illustration."
image={image}
imageAlt=""
size="lg"
/>
<CfEmpty
title="No releases yet"
description="Pass image for a product-specific illustration."
image={image}
imageAlt=""
size="lg"
/>

Three sizes

size — sm (inline placeholder), md (default), lg (full-page empty state).

背景
size = sm
size = md
size = lg
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />
<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />

API

PropTypeDefaultDescription
titlestring'No data'Main message
descriptionstring—Secondary message
size'sm' | 'md' | 'lg''md'Overall size
imagestring—Custom image URL / data URL
imageAltstring''Image alt text; keep empty for decorative images

Slots / children

  • icon — replace the default SVG icon
  • title / description — replace the text nodes (the same-named props also work)
  • action — action button area

CfStatusIllustration

PropTypeDefaultDescription
variant'empty' | 'search' | 'upload' | 'success' | 'info' | 'warning' | 'error' | 'not-found' | 'forbidden' | 'server-error''empty'Status illustration type
size'sm' | 'md' | 'lg''md'Illustration size
titlestring—Used as the accessible name when provided; treated as decorative when omitted

反馈与讨论

Empty · Discussion

0
0 / 600
一键发送
正在加载评论...