Empty 空状态

空状态组件用于在没有内容可展示时，引导用户理解当前情况并采取下一步行动。常用于首次使用、空数据、错误页面等场景。

💡 TEmpty 组件本身没有背景色，视觉效果依赖所在页面的背景。在实际使用中，常放置于白色背景的卡片或页面区域内。

---

基础用法

使用 title 和 subtitle 属性快速构建一个简单的空状态提示。

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for."/>

---

带图标

通过 icon 插槽添加一个 @tabler/icons-vue 图标，使空状态更加直观。

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for.">
  <template #icon>
    <IconMoodSad :size="48"/>
  </template>
</TEmpty>

---

带操作按钮

通过 action 插槽添加操作按钮，鼓励用户采取行动。

查看代码

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for.">
  <template #icon>
    <IconSearch :size="48"/>
  </template>
  <template #action>
    <a href="#" class="btn btn-primary">
      <IconSearch :size="24"/>
      Search again
    </a>
  </template>
</TEmpty>

---

带边框

启用 bordered 属性，为空状态容器添加边框，使其在页面中视觉区域更明确。

<TEmpty bordered title="No results found"
        subtitle="Try adjusting your search or filter to find what you're looking for.">
  <template #icon>
    <IconMoodSad :size="48"/>
  </template>
</TEmpty>

---

带插画

通过 img 插槽放置 SVG 插画，使空状态更具品牌感和吸引力。

查看代码

<TEmpty title="Invoices are managed from here"
        subtitle="Try adjusting your search or filter to find what you're looking for.">
  <template #img>
    <!-- 可放置任意 SVG 插画，推荐使用 Tabler Illustrations -->
    <svg class="img" ...>...</svg>
  </template>
  <template #action>
    <a href="#" class="btn btn-primary">
      <IconPlus :size="24"/>
      New invoice
    </a>
  </template>
</TEmpty>

---

自定义标题与副标题

标题和副标题既可通过 props 传入纯文本，也可通过同名插槽传入富文本内容。插槽优先级高于 props。

查看代码

<TEmpty>
  <template #icon>
    <IconFileText :size="48"/>
  </template>
  <template #title>
    <strong>Custom Title</strong>
  </template>
  <template #subtitle>
    <em>Custom subtitle with <a href="#">rich text</a> support</em>
  </template>
</TEmpty>

---

API

Props

属性	类型	默认值	说明
title	string	''	主标题文字（可被 title 插槽覆盖）
subtitle	string	''	副标题文字（可被 subtitle 插槽覆盖）
bordered	boolean	false	是否为容器添加边框

Slots

插槽	说明
icon	小图标区域，推荐使用 @tabler/icons-vue
img	插画/大图区域，放置 SVG 插画
header	大号标题区域（如 "404" 数字）
title	主标题，优先使用插槽；fallback 使用 title prop
subtitle	副标题，优先使用插槽；fallback 使用 subtitle prop
action	操作按钮区域
default	自由插槽，不加 wrapper