Primitive — hiển thị dữ liệu

Thành phần trình bày dữ liệu ngoài bảng: mô tả, tab, huy hiệu, cây, bước.

import {
  CDescriptions, CDescriptionsItem, CBadge, CAvatar,
  CTabs, CTabPane, CCollapse, CCollapsePanel,
  CTooltip, CPopover, CPagination, CSteps, CStep, CTree,
} from '@tasco/ui'

<script setup lang="ts">
import { ref } from 'vue'
import {
  CBadge,
  CDescriptions,
  CDescriptionsItem,
  CTabPane,
  CTabs,
  CTooltip,
} from '@tasco/ui'

// Primitive hiển thị dữ liệu hay dùng ở trang chi tiết.
const tab = ref('info')
</script>

<template>
  <CTabs v-model:active-key="tab">
    <CTabPane
      key="info"
      tab="Thông tin"
    >
      <CDescriptions
        :column="2"
        bordered
        size="small"
      >
        <CDescriptionsItem label="Mã đơn">
          DH-0001
        </CDescriptionsItem>
        <CDescriptionsItem label="Khách hàng">
          Công ty An Bình
        </CDescriptionsItem>
        <CDescriptionsItem label="Giá trị">
          12.500.000 ₫
        </CDescriptionsItem>
        <CDescriptionsItem label="Trạng thái">
          <CTag
            color="success"
            dot
          >
            Hoàn thành
          </CTag>
        </CDescriptionsItem>
      </CDescriptions>
    </CTabPane>

    <CTabPane key="history">
      <template #tab>
        <CBadge
          :count="3"
          :offset="[10, -2]"
        >
          Lịch sử
        </CBadge>
      </template>

      <CTooltip title="Thời điểm ghi nhận trên hệ thống">
        <span>03/09/2026 — Đơn được duyệt</span>
      </CTooltip>
    </CTabPane>
  </CTabs>
</template>

Chọn đúng component

Việc	Component
Thông tin một bản ghi dạng nhãn — giá trị	CDescriptions + CDescriptionsItem
Chia nội dung thành nhóm ngang hàng	CTabs + CTabPane
Nội dung phụ có thể giấu đi	CCollapse + CCollapsePanel, hoặc CCard collapsible
Đếm số chưa xử lý	CBadge
Ảnh đại diện, chữ cái đầu	CAvatar
Giải thích ngắn khi rê chuột	CTooltip
Nội dung phụ dài hơn, có thể tương tác	CPopover
Quy trình nhiều bước	CSteps + CStep
Dữ liệu phân cấp	CTree
Phân trang rời (không dùng bảng)	CPagination

CDescriptions cho trang chi tiết

<CDescriptions :column="2" bordered size="small">
  <CDescriptionsItem label="Mã đơn">{{ order.code }}</CDescriptionsItem>
  <CDescriptionsItem label="Trạng thái">
    <CTag :color="ORDER_STATUS[order.status].color" dot>
      {{ ORDER_STATUS[order.status].label }}
    </CTag>
  </CDescriptionsItem>
</CDescriptions>

• :column="2" cho màn hình rộng; antd tự xuống một cột khi hẹp.
• Ô trống vẫn nên hiện với dấu —, đừng bỏ hẳn hàng: người dùng cần biết trường đó tồn tại.

Tab

• Tab nặng (bảng con, biểu đồ) chỉ nên tải khi mở lần đầu — immediate: false cho useTable, gọi load() trong watch của tab đang chọn.
• Muốn giữ tab qua lần tải lại trang thì đồng bộ với query string (?tab=items).

Tooltip và Popover

Cả hai dùng Teleport: chúng là một trong những chỗ gãy khi bật SSR. Với route bật SSR, bọc <ClientOnly> — xem Chế độ render.

Tooltip không thay được nhãn cho trình đọc màn hình: nút chỉ có icon vẫn cần aria-label.

Lưu ý

• CPagination chỉ dùng khi danh sách không phải bảng; trong bảng thì phân trang đã nằm sẵn ở CTable.
• CTree dữ liệu lớn thì tải theo nhánh (load-data) thay vì đổ cả cây một lần.
• Số trong CBadge nên có :overflow-count để không phá vỡ bố cục khi lên hàng nghìn.

Liên quan

• CTable — dữ liệu dạng bảng.
• Trang chi tiết — nơi dùng nhiều nhất.