TEmpty / 空状态

Empty state displays when there is no data or content. Supports title, subtitle, icon, image, and action slots for customization. / 空状态组件用于无数据或空内容时的占位展示，支持标题、副标题、图标、插画和操作区域的插槽自定义。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
title	string	''	Main title / 主标题
subtitle	string	''	Subtitle / 副标题
bordered	boolean	false	Add border / 添加边框

Slots / 插槽

Slot	Description / 说明
icon	Large icon area / 大号图标
img	Illustration image / 插画图片
header	Large header text / 大号标题文本
title	Title (overrides title prop)
subtitle	Subtitle (overrides subtitle prop)
action	Action button area / 操作按钮区域
default	Additional custom content

Basic Usage / 基础用法

<script setup lang="ts">
import { TEmpty } from '@gulcc/tabler-vue'
</script>

<template>
  <TEmpty title="No Data / 暂无数据" subtitle="Check back later / 稍后再来查看" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TEmpty } from '@gulcc/tabler-vue'
import { IconSearch } from '@tabler/icons-vue'
</script>

<template>
  <!-- With icon / 带图标 -->
  <TEmpty title="No Results / 无结果" subtitle="Try a different search term / 尝试其他关键词">
    <template #icon>
      <IconSearch :size="48" class="text-secondary" />
    </template>
  </TEmpty>

  <!-- With action button / 带操作按钮 -->
  <TEmpty title="No Items / 没有项目" subtitle="Create your first item / 创建你的第一个项目">
    <template #action>
      <TButton color="primary">Create / 创建</TButton>
    </template>
  </TEmpty>

  <!-- Bordered / 带边框 -->
  <TEmpty
    title="Empty State / 空状态"
    subtitle="This container is empty / 此容器为空"
    bordered
  />

  <!-- Custom illustration / 自定义插画 -->
  <TEmpty title="Coming Soon / 即将上线">
    <template #img>
      <img src="/empty.svg" alt="illustration" />
    </template>
    <template #action>
      <TButton color="primary" outline>Notify Me / 通知我</TButton>
    </template>
  </TEmpty>
</template>

Tips / 避坑指南

• title and subtitle can be overridden by their named slots for richer HTML content
• The icon slot is for a decorative icon; the img slot is for larger illustrations
• bordered adds the empty-bordered class (dashed border around the empty area)
• Use the action slot to place call-to-action buttons
• The default slot (unnamed) renders without any wrapper class for maximum flexibility