CStatus

Chỉ báo trạng thái hai giá trị: một chấm màu, kèm nhãn hoặc tooltip. Không phụ thuộc thư viện icon — chấm vẽ bằng CSS.

Dùng khi: trường dữ liệu chỉ có hai trạng thái đối lập — hoạt động/ngừng, bật/tắt, còn hạn/hết hạn, đã kết nối/mất kết nối.

Không dùng khi: trạng thái có từ ba giá trị trở lên (mới, đang xử lý, hoàn thành, huỷ) — dùng CTag để mỗi giá trị có nhãn chữ riêng.

<script setup lang="ts">
// Chấm màu cho trạng thái hai giá trị. Không có `show-text` thì nhãn nằm trong tooltip.
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <CStatus :status="1" />
    <CStatus :status="0" />
    <CStatus
      :status="1"
      show-text
    />
    <CStatus
      :status="0"
      show-text
    />
  </div>
</template>

Không bật show-text thì nhãn nằm trong tooltip — gọn cho cột hẹp, nhưng người dùng phải rê chuột mới đọc được. Cột đủ rộng thì bật show-text.

Giá trị và nhãn tuỳ nghiệp vụ

<script setup lang="ts">
// Dữ liệu không dùng 1/0: khai `active-value` và hai nhãn cho đúng nghiệp vụ.
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <CStatus
      status="ACTIVE"
      active-value="ACTIVE"
      active-text="Đang hợp tác"
      inactive-text="Đã ngừng"
      show-text
    />
    <CStatus
      status="SUSPENDED"
      active-value="ACTIVE"
      active-text="Đang hợp tác"
      inactive-text="Đã ngừng"
      show-text
    />
    <CStatus
      :status="true"
      active-text="Đã kết nối"
      inactive-text="Mất kết nối"
      show-text
    />
  </div>
</template>

status so sánh với active-value (mặc định 1); true luôn được coi là đang hoạt động. Mọi giá trị khác đều là "không hoạt động" — nghĩa là dữ liệu có ba trạng thái sẽ bị gộp còn hai, đây là lý do để chuyển sang CTag.

Nhãn nên nói đúng nghiệp vụ ("Đang hợp tác" / "Đã ngừng") thay vì mặc định chung chung.

Trong bảng

<script setup lang="ts">
// Trong cột của CTable: chấm không kèm chữ giữ cho bảng gọn, nhãn đọc được qua tooltip.
interface Customer {
  id: number
  name: string
  taxCode: string
  active: number
}

const columns = [
  { title: 'Khách hàng', dataIndex: 'name', key: 'name' },
  { title: 'Mã số thuế', dataIndex: 'taxCode', key: 'taxCode', width: 160 },
  { title: 'Hoạt động', dataIndex: 'active', key: 'active', width: 110, align: 'center' },
]

const dataSource: Customer[] = [
  { id: 1, name: 'Công ty An Bình', taxCode: '0101234567', active: 1 },
  { id: 2, name: 'Tập đoàn Bắc Sơn', taxCode: '0209876543', active: 1 },
  { id: 3, name: 'Cửa hàng Cường Thịnh', taxCode: '0311223344', active: 0 },
]
</script>

<template>
  <CTable
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :pagination="false"
  >
    <template #bodyCell="{ column, record }">
      <CStatus
        v-if="column.key === 'active'"
        :status="(record as Customer).active"
      />
    </template>
  </CTable>
</template>

API

Props

Tên	Kiểu	Mặc định	Mô tả
status*	string | number | boolean	false	Giá trị trạng thái lấy từ dữ liệu (thường là 1/0 hoặc true/false).
activeValue	string | number | boolean	1	Giá trị được coi là "đang hoạt động"; khác giá trị này là ngừng.
activeText	string	'Hoạt động'	Nhãn khi hoạt động.
inactiveText	string	'Không hoạt động'	Nhãn khi ngừng hoạt động.
showText	boolean	false	Hiện nhãn chữ bên cạnh chấm.

Giao diện

Trạng thái	Chấm	Chữ
Hoạt động	--tasco-color-success + quầng --tasco-color-success-soft	--tasco-color-success-text
Ngừng	--tasco-color-error + quầng --tasco-color-error-soft	--tasco-color-error

Chấm là đồ hoạ nên chỉ cần tương phản 3:1; phần chữ dùng biến -text để đạt 4.5:1 — xem Theme & design token. Class BEM: c-status, c-status--active, c-status--inactive, c-status__dot, c-status__text.

Khả năng tiếp cận

• Màu không phải kênh thông tin duy nhất: bật show-text, hoặc giữ tooltip để nhãn còn đọc được.
• Tooltip của antd hiện khi focus bằng bàn phím, không chỉ khi rê chuột.
• Tránh đặt hai CStatus sát nhau cho hai ý nghĩa khác nhau mà không có nhãn — người dùng không đoán được chấm nào nói về cái gì.

Lưu ý

• Dữ liệu trả '1' (chuỗi) trong khi active-value là 1 (số) thì so sánh không khớp: hai kiểu khác nhau. Chuẩn hoá kiểu ở fetcher, hoặc khai active-value="1" cho đúng.
• Trạng thái mang nghĩa xấu mà vẫn đang "hoạt động" (ví dụ "đang bị khoá") thì màu xanh sẽ gây hiểu nhầm — trường hợp này dùng CTag với màu theo ngữ nghĩa.

Liên quan

• CTag — trạng thái nhiều giá trị.
• CTable — cột trạng thái.