CEmpty

Trạng thái rỗng căn giữa: hình minh hoạ, một câu giải thích, và (tuỳ chọn) nút hành động.

Dùng khi: một khu vực không có dữ liệu để hiển thị — danh sách trống, kết quả lọc rỗng, tab chưa có nội dung, khối dashboard chưa tính được số liệu.

Không dùng khi: đang tải (dùng loading của bảng hoặc khung chờ), hoặc khi có lỗi thật sự — lỗi cần nói rõ nguyên nhân và cho cách thử lại, xem Hiển thị lỗi.

<script setup lang="ts">
// Trạng thái rỗng mặc định và bản có viền nét đứt.
</script>

<template>
  <div style="display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))">
    <CEmpty />
    <CEmpty
      description="Chưa có đơn hàng nào"
      bordered
    />
  </div>
</template>

Kèm hành động

<script setup lang="ts">
// Rỗng vì CHƯA CÓ dữ liệu → mời người dùng tạo bản ghi đầu tiên.
</script>

<template>
  <CEmpty
    description="Chưa có đơn hàng nào. Tạo đơn đầu tiên để bắt đầu theo dõi."
    bordered
  >
    <CButton variant="primary">
      Tạo đơn
    </CButton>
  </CEmpty>
</template>

Rỗng vì chưa có dữ liệu ≠ rỗng vì bộ lọc

Hai tình huống này cần hai câu chữ khác nhau, và nhất là hai hành động khác nhau:

Tình huống	Câu mô tả	Nút
Chưa có bản ghi nào	"Chưa có đơn hàng nào. Tạo đơn đầu tiên để bắt đầu theo dõi."	Tạo mới
Bộ lọc không ra kết quả	"Không tìm thấy đơn hàng nào khớp từ khoá."	Xoá bộ lọc
Không có quyền xem	"Bạn không có quyền xem dữ liệu này."	Không có nút

<script setup lang="ts">
import { ref } from 'vue'
import { CInput } from '@tasco/ui'

// Rỗng vì BỘ LỌC không ra kết quả → lời mời phải là xoá lọc, không phải tạo mới.
const keyword = ref('khong-ton-tai')

function reset() {
  keyword.value = ''
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <CInput
      v-model:value="keyword"
      placeholder="Từ khoá tìm kiếm"
      style="max-width: 280px"
    />

    <CEmpty
      v-if="keyword"
      :description="`Không tìm thấy đơn hàng nào khớp “${keyword}”.`"
      bordered
    >
      <CButton
        variant="outline"
        @click="reset"
      >
        Xoá bộ lọc
      </CButton>
    </CEmpty>

    <p v-else>
      (Đã xoá bộ lọc — danh sách hiện lại đầy đủ.)
    </p>
  </div>
</template>

Mời người dùng "Tạo mới" trong khi thật ra họ chỉ lọc nhầm là lỗi thường gặp nhất của trạng thái rỗng.

API

Props

Tên	Kiểu	Mặc định	Mô tả
description	string	'Không có dữ liệu'	Câu mô tả dưới hình minh hoạ.
bordered	boolean	false	Thêm viền quanh khối trạng thái rỗng.

Slot

Tên	Props của slot	Mô tả
#image	any	Thay hình minh hoạ mặc định.
#default	any	Nút hành động dưới mô tả, vd "Thêm mới".

Giao diện

Nền --tasco-color-surface, bo góc --tasco-radius, chữ mô tả --tasco-color-text-subtle. Bật bordered thêm viền nét đứt --tasco-color-border — dùng khi khối rỗng nằm trực tiếp trên nền trang và cần ranh giới.

Class BEM: c-empty, c-empty--bordered. Thay hình minh hoạ bằng slot #image.

Khả năng tiếp cận

• Câu mô tả là văn bản thật, trình đọc màn hình đọc được — đừng thay bằng ảnh có chữ.
• Hình minh hoạ chỉ mang tính trang trí; ảnh tự đặt vào slot #image nên để alt="".
• Nút hành động trong slot mặc định vẫn là CButton bình thường, giữ nguyên thao tác bàn phím.

Lưu ý

• CTable đã tự hiện phần rỗng của antd; chỉ dùng CEmpty khi cần câu chữ và hành động riêng (qua slot #emptyText của bảng, hoặc đặt ngoài bảng).
• Một câu là đủ. Trạng thái rỗng không phải chỗ để viết hướng dẫn dài.
• Đừng dùng CEmpty làm thông báo lỗi: người dùng sẽ tưởng dữ liệu trống thật.

Liên quan

• CTable — trạng thái rỗng của bảng.
• Hiển thị lỗi — phân biệt rỗng và lỗi.
• Trang danh sách — nơi hay gặp trạng thái rỗng nhất.