CPageHeader

Dải tiêu đề đặt ở đầu mỗi trang: breadcrumb, tiêu đề, dòng phụ và nhóm hành động của cả trang.

Dùng khi: mở đầu một trang nội dung — danh sách, chi tiết, form, dashboard.

Không dùng khi: đặt tiêu đề cho một khối bên trong trang — dùng title của CCard hoặc CTable.

<script setup lang="ts">
// Tiêu đề trang: dòng chính + dòng phụ mô tả phạm vi dữ liệu đang xem.
</script>

<template>
  <CPageHeader
    title="Đơn hàng"
    sub-title="Danh sách đơn hàng toàn hệ thống"
  />
</template>

Dòng phụ nói phạm vi dữ liệu đang xem ("47 đơn trong tháng 9", "Chi nhánh Hà Nội") — đừng lặp lại tiêu đề bằng từ khác.

Breadcrumb

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

// Breadcrumb router-agnostic: item có `to` phát sự kiện `navigate`, trang tự điều hướng.
// Trong app Nuxt: @navigate="navigateTo".
const breadcrumb: BreadcrumbRoute[] = [
  { title: 'Trang chủ', to: '/' },
  { title: 'Đơn hàng', to: '/orders' },
  { title: 'DH-0001' },
]

const navigated = ref('')
</script>

<template>
  <div>
    <CPageHeader
      title="DH-0001"
      sub-title="Công ty An Bình"
      :breadcrumb="breadcrumb"
      @navigate="(to: string) => (navigated = to)"
    />
    <p v-if="navigated">
      Trang sẽ gọi <code>navigateTo('{{ navigated }}')</code>
    </p>
  </div>
</template>

Component không phụ thuộc router: item có to chỉ phát sự kiện navigate, trang tự quyết định điều hướng. Trong app Nuxt gần như luôn là:

<CPageHeader :breadcrumb="breadcrumb" @navigate="navigateTo" />

Quên bind @navigate thì bấm breadcrumb không có gì xảy ra. Mục cuối là trang hiện tại nên không có to.

Nhóm hành động

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

// Slot #extra: nhóm hành động của cả trang. Một nút chính, còn lại là phụ.
</script>

<template>
  <CPageHeader
    title="Đơn hàng"
    sub-title="47 đơn trong tháng 9"
  >
    <template #extra>
      <CButton
        variant="text"
        size="sm"
      >
        Xuất Excel
      </CButton>
      <CButton
        variant="outline"
        size="sm"
      >
        Nhập từ file
      </CButton>
      <CButton
        variant="primary"
        size="sm"
      >
        <template #icon>
          <IconPlus :size="15" />
        </template>
        Tạo đơn
      </CButton>
    </template>
  </CPageHeader>
</template>

Chỉ đặt vào #extra những hành động tác động lên cả trang. Hành động trên một dòng dữ liệu thuộc về cột hành động của bảng; hành động trên một khối thuộc về header của khối đó.

Chặn theo quyền bằng v-can — xem Chặn theo quyền:

<CButton v-can="'/orders/create'" variant="primary">Tạo đơn</CButton>

Tiêu đề tuỳ biến

<script setup lang="ts">
// Slot #title khi tiêu đề cần thêm thành phần: trạng thái, mã, nhãn phân loại.
</script>

<template>
  <CPageHeader sub-title="Cập nhật 5 phút trước">
    <template #title>
      <span style="display: inline-flex; align-items: center; gap: 10px">
        <h1
          style="
            margin: 0;
            font-family: var(--tasco-font-family-heading);
            font-size: 20px;
            font-weight: 700;
            color: var(--tasco-color-text);
          "
        >
          DH-0001
        </h1>
        <CTag
          color="warning"
          dot
        >
          Chờ duyệt
        </CTag>
      </span>
    </template>

    <template #extra>
      <CButton
        variant="danger"
        size="sm"
      >
        Từ chối
      </CButton>
      <CButton
        variant="primary"
        size="sm"
      >
        Duyệt đơn
      </CButton>
    </template>
  </CPageHeader>
</template>

API

Props

Tên	Kiểu	Mặc định	Mô tả
title	string	undefined	Tiêu đề trang; slot #title để tuỳ biến.
subTitle	string	undefined	Dòng phụ dưới tiêu đề.
breadcrumb	BreadcrumbRoute[]	[]	Đường dẫn breadcrumb; item có `to` sẽ phát sự kiện navigate khi bấm.

Sự kiện

Tên	Payload	Mô tả
navigate	[to: string]	Bấm một breadcrumb có `to` — router-agnostic, trang tự gọi navigateTo.

Slot

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

Giao diện

Nền --tasco-color-surface, gạch chân --tasco-color-border, tiêu đề dùng --tasco-font-family-heading cỡ 20px, dòng phụ --tasco-color-text-muted. Class BEM: c-page-header, __crumbs, __titles, __title, __subtitle, __extra.

Khối co giãn theo chiều ngang: khi hẹp, nhóm hành động tự xuống dòng dưới tiêu đề.

Khả năng tiếp cận

• Tiêu đề mặc định render bằng <h1> — mỗi trang chỉ nên có một CPageHeader.
• Dùng slot #title thì tự đặt heading thật bên trong (như demo), đừng để trang mất mốc <h1>.
• Breadcrumb là danh sách liên kết thật: Tab tới được, Enter kích hoạt. Sự kiện navigate đã chặn hành vi mặc định của thẻ <a> nên không tải lại trang.

Lưu ý

• Breadcrumb bám cấu trúc nghiệp vụ, không nhất thiết bám cây thư mục route.
• Tiêu đề trang chi tiết nên là định danh người dùng nhận ra (mã đơn, tên khách hàng), không phải "Chi tiết".
• Đừng nhét bộ lọc vào #extra — bộ lọc thuộc về toolbar của bảng.

Liên quan

• CCard — tiêu đề cho một khối.
• CTable — toolbar và tiêu đề của bảng.
• Khung giao diện — vị trí của dải tiêu đề trong khung app.