DetailRail
Mẫu chuẩnMột cột nhận dạng cố định bên trái cạnh một thân có tab bên phải. Dưới breakpoint small, cột nhận dạng xếp lên trên thân thay vì đứng cạnh. Không mang một chữ nào về nghiệp vụ của host -- host truyền children cho cột và một mảng tab.
Playground
Đổi bề rộng khung xem trước để thấy cột nhận dạng xếp lên trên thân dưới ngưỡng small (640px).
Bề rộng khung: "wide".
import { DetailRail } from "@nexobox/ui";
<DetailRail
tabs={[
{ id: "one", label: "Tổng quan", content: <OverviewPane /> },
{ id: "two", label: "Chi tiết", content: <DetailPane /> },
]}
>
<IdentityFacts />
</DetailRail>Bài toán
Màn chi tiết sản phẩm, khách hàng và đơn hàng đều cần cùng một câu trả lời trước khi đổi tab: "tôi đang xem cái gì". P-D15 (docs/09_delivery/crm-mvp/product-information-architecture.md §5) đặt nó vào một cột cố định bên trái thay vì lặp lại trong mỗi tab. Không primitive nào sở hữu bố cục cột-cố-định-cạnh-thân-có-tab.
Khi nào sử dụng
Nên dùng
Một màn chi tiết có một tập facts luôn cần nhìn thấy, cộng một thân nội dung chia theo tab.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Một trang không có tab, chỉ có nội dung đơn | PageHeader + nội dung thường |
| Hai cột cuộn độc lập (danh sách + ngữ cảnh) | Không có trong corpus — đây là một cột + một thân có tab, không phải hai cột cuộn riêng |
Dựng từ
| Primitive tầng 1 | Vai trong composite |
|---|---|
| Tabs | Cơ chế chuyển tab của thân bên phải, không viết lại |
| DetailRail thêm gì |
|---|
| Bố cục hai cột: cột nhận dạng cố định, thân có tab |
Xếp chồng dưới small: cột nhận dạng lên trên thân |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Rail | children. Host quyết định toàn bộ nội dung — ảnh, tên, nhãn trạng thái. |
| 2 | Thân có tab | tabs, mỗi phần tử { id, label, content }, dựng trên Tabs sẵn có. |
States
Trạng thái duy nhất composite tự quản là tab đang chọn (do Tabs primitive giữ). Mọi trạng thái khác thuộc nội dung host truyền vào.
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không biết nó đang hiển thị sản phẩm, khách hàng hay đơn hàng. Host sở hữu toàn bộ chữ nghĩa, dữ liệu và việc tab nào mặc định chọn (qua defaultTabId, mặc định là tab đầu tiên).
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| children | — | Bắt buộc. Nội dung cột nhận dạng. |
| tabs | — | Bắt buộc. Mảng { id, label, content }. |
| defaultTabId | tabs[0].id | Id tab chọn sẵn. |
Design tokens
--nf-foundation-layout-context-panel (bề rộng cột nhận dạng từ small trở lên), --nf-foundation-space-4 (khoảng cách trong mỗi cột), --nf-foundation-space-6 (khoảng cách giữa hai cột). small là breakpoint đặt tên duy nhất repo này cho phép literal px (theme.css), giống ngưỡng xếp chồng của PageHeader. Qua Tabs: --nf-component-tabs-*.
Do / Don't
Nên dùng
Đặt mọi fact host luôn cần nhìn thấy vào cột nhận dạng. Giữ composite không biết tên miền của host.
Tránh dùng
Gõ chữ nghiệp vụ ("sản phẩm", "giá", "biến thể") vào bên trong composite. Viết lại cơ chế tab thay vì dựng trên Tabs sẵn có.