Component / 049 / NEXOFRAME

PageHeader

Mẫu chuẩn

Phần đầu của một trang ứng dụng: một h1, một dòng mô tả tuỳ chọn, và một vùng hành động bên phải. Dưới breakpoint small, vùng hành động xuống dòng. Mỗi trang có đúng một PageHeader.

Composite tầng 2Không dựng từ primitive nào1 h1 mỗi trangTối đa 2 hành động

Playground

Đổi brand, theme, mô tả và vùng hành động để xem cùng một PageHeader thích ứng.

Đội ngũ của tôi

Mỗi Human AI có nhiệm vụ, kênh làm việc và giới hạn quyền riêng.

Dưới breakpoint small, vùng hành động xuống dòng.

import { Button, PageHeader } from "@nexobox/ui";

<PageHeader
  title="Đội ngũ của tôi"
  description="Mỗi Human AI có nhiệm vụ, kênh làm việc và giới hạn quyền riêng."
  actions={<Button>Tuyển Human AI</Button>}
/>

Bài toán

Mỗi route trong apps/nexo-crew cần một tiêu đề, một câu nói trang dùng để làm gì, và một hoặc hai hành động cấp trang ("Tuyển Human AI"). Ghép tay h1, đoạn văn và các nút thì mỗi route lệch nhau về khoảng cách, cách xuống dòng trên mobile và cấp heading. Không primitive nào sở hữu một bố cục đầu trang.

Khi nào sử dụng

Nên dùng

Đầu của mọi route trong apps/*. Kèm tối đa hai hành động cấp trang.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Tiêu đề của một khối trong trang	SectionHeader
Tiêu đề trong dialog hoặc sheet	`DialogTitle` / `SheetTitle` của Dialog, Sheet
Breadcrumb	Breadcrumb, đặt trong shell

Dựng từ

Primitive tầng 1	Vai trong composite
—	Không primitive nào. Hành động là node do người gọi truyền vào.

PageHeader thêm gì
`h1` cố định: một trang, một `h1`
Bố cục hai cột, xếp dọc dưới small
Khoảng cách chuẩn giữa tiêu đề, mô tả và hành động

Giống FormError và Wordmark, nó không dựng từ primitive tầng 1 nào. Nó vẫn thuộc tầng 2 vì nó thêm một thứ mà không primitive nào có: bố cục đầu trang thống nhất, chuyển được theo breakpoint.

Anatomy

#	Phần	Ghi chú
1	h1	Tiêu đề trang.
2	Mô tả (p)	Một câu, tuỳ chọn.
3	Vùng hành động	Bên phải, xếp dọc dưới small, thường một hoặc hai Button.

States

Một trạng thái hiển thị. Tự nó không nhận tương tác; các hành động bên trong có trạng thái riêng.

Bàn phím & trợ năng

Tab qua các hành động -- các Button do người gọi truyền.

Composite không thêm phím nào. h1 là mốc điều hướng theo heading.

Seam — host sở hữu gì

Composite không đặt <title> của tài liệu, không đọc route, không render breadcrumb. Host sở hữu câu chữ, các hành động và việc đặt metadata của trang (qua next ở app, không bao giờ ở đây — ADR-UI-004 clause 2).

API & triển khai

Prop	Mặc định	Quy ước
title	—	Bắt buộc. Render trong h1.
description	—	Một câu.
actions	—	Thường là một hoặc hai Button.

Mọi thuộc tính <header> còn lại được truyền thẳng. className được nối.

Design tokens

--nf-foundation-typography-heading1-*, --nf-foundation-typography-body-*, --nf-semantic-text-primary, --nf-semantic-text-secondary, --nf-foundation-space-2 (giữa các hành động; giữa tiêu đề và mô tả), --nf-foundation-space-4 (giữa hai cột), --nf-foundation-space-6 (lề dưới).

Do / Don't

Nên dùng

Một PageHeader mỗi route. Mô tả là một câu về việc trang giúp làm. Tối đa hai hành động; hành động chính dùng Button variant="primary".

Tránh dùng

Hai h1 trên một trang. Mô tả nhắc lại tiêu đề. Nhồi bộ lọc hoặc ô tìm kiếm vào actions — chúng thuộc toolbar của nội dung.