CCard

Khung nội dung có tiêu đề, dùng để gom một nhóm thông tin thành khối nhìn thấy được. Bọc a-card, thêm biến thể khung và chế độ thu gọn.

Dùng khi: chia trang thành các khối có tên gọi — thông tin chung, bộ lọc, khối chỉ số, nhóm trường trong form dài.

Không dùng khi: bọc CTable (bảng đã có khung card riêng, lồng vào sẽ thành hai lớp viền), hoặc khi khối chỉ có một câu chữ — khoảng cách là đủ, không cần thêm khung.

<script setup lang="ts">
// Khối nội dung có tiêu đề. Mặc định type="primary" (header navy) và không viền.
</script>

<template>
  <CCard title="Thông tin đơn hàng">
    <p style="margin: 0">
      Mã đơn: <strong>DH-0001</strong>
    </p>
    <p style="margin: 8px 0 0">
      Khách hàng: Công ty An Bình
    </p>
  </CCard>
</template>

Biến thể khung

<script setup lang="ts">
// Năm biến thể khung. Style của từng `type` nằm ở base.css của @tasco/theme
// (antd 4.x bỏ qua theme.components nên không cấu hình bằng token được).
const types = ['primary', 'default', 'outline', 'filled', 'ghost'] as const
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px">
    <CCard
      v-for="type in types"
      :key="type"
      :type="type"
      :title="`type=&quot;${type}&quot;`"
      :borderless="false"
    >
      Nội dung mẫu của khung.
    </CCard>
  </div>
</template>

type	Hình thức	Dùng cho
primary (mặc định)	Header nền navy	Khối chính của trang
default	Header nền trắng, có viền	Khối phụ, nhiều khối cạnh nhau
outline	Gạch nhấn màu primary	Khối cần nổi hơn một chút
filled	Nền mờ	Khối thông tin nền, ít tương tác
ghost	Trong suốt	Gom nhóm mà không muốn thấy khung

borderless mặc định là true (không viền, không bóng). Đặt :borderless="false" khi các khối đặt sát nhau và cần ranh giới rõ.

Thu gọn

<script setup lang="ts">
// Thu gọn được: dùng cho khối phụ (bộ lọc nâng cao, lịch sử) để trang đỡ dài.
// Slot #actions đặt nút bên phải header.
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <CCard
      title="Bộ lọc nâng cao"
      collapsible
      :default-open="false"
    >
      <template #actions>
        <CButton
          variant="text"
          size="sm"
        >
          Đặt lại
        </CButton>
      </template>
      Các điều kiện lọc ít dùng đặt ở đây.
    </CCard>

    <CCard
      title="Lịch sử thao tác"
      collapsible
    >
      Mở sẵn vì người dùng thường cần xem ngay.
    </CCard>
  </div>
</template>

collapsible biến phần thân thành khối đóng mở được; default-open quyết định trạng thái ban đầu. Dùng cho nội dung phụ — đừng giấu thứ người dùng cần thấy ngay sau khi mở trang.

API

Props

Tên	Kiểu	Mặc định	Mô tả
title	string	''	Tiêu đề ở header; slot #title để tuỳ biến. Rỗng và không có slot thì ẩn header.
collapsible	boolean	false	Cho phép thu gọn nội dung.
defaultOpen	boolean	true	Trạng thái mở ban đầu khi collapsible.
borderless	boolean	true	Bỏ viền + bóng.
type	"default" | "primary" | "outline" | "ghost" | "filled"	'primary'	Biến thể: primary (header navy), outline (gạch primary), filled, ghost, default.

Slot

Tên	Props của slot	Mô tả
#title	any	Thay phần tiêu đề ở header (mặc định hiện `title`).
#actions	any	Nút hành động bên phải header.
#default	any	Nội dung thẻ.

Mọi thuộc tính khác của a-card (body-style, loading, size…) được chuyển tiếp nguyên vẹn.

Giao diện

Nền --tasco-color-surface, bo góc --tasco-radius-lg, viền --tasco-color-border. Khoảng đệm thân card lấy từ --tasco-card-padding-block và --tasco-card-padding-inline; tiêu đề dùng --tasco-font-family-heading cỡ --tasco-card-heading-font-size.

Style của từng type nằm trong base.css của @tasco/theme (.c-card-primary, .c-card-outline…) vì ant-design-vue 4.x bỏ qua theme.components. Muốn đổi mật độ cho toàn hệ thống thì sửa density trong @tasco/theme, không ghi đè ở từng dự án — xem Theme & design token.

Khả năng tiếp cận

• Tiêu đề card render bằng thẻ văn bản thường, không phải heading — muốn nó là mốc điều hướng cho trình đọc màn hình thì đặt heading thật vào slot #title.
• Ở chế độ thu gọn, phần header là nút đóng mở của antd: có aria-expanded, thao tác được bằng bàn phím. Đừng lồng nút khác vào vùng header ngoài slot #actions.

Lưu ý

• Không lồng CCard trong CCard: hai lớp khung làm mất tôn ti thông tin. Cần chia nhỏ thì dùng tiêu đề phụ và đường kẻ.
• Không bọc CTable bằng CCard — xem Trang danh sách.
• Nhiều khối cạnh nhau thì cho cùng một type để không loạn; chỉ khối chính mới khác biệt.

Liên quan

• CTable — đã có khung card riêng.
• CEmpty — trạng thái rỗng bên trong card.
• Trang tổng quan — lưới nhiều card chỉ số.