Playground

Đổi "Loại bản ghi" để thấy dải giai đoạn chỉ xuất hiện ở deal, đổi "Trạng thái" để thấy cả bốn trạng thái của rail, và đổi bề rộng khung để thấy rail xếp lên trên main dưới small.

import { RecordShell } from "@nexobox/ui";

<RecordShell
  header={<PageHeader title={record.name} />}
  strip={isDeal ? <FilterTabs ... /> : undefined}
  rail={[
    { id: "contact", title: "Thông tin liên hệ", defaultOpen: true, content: <ContactFields /> },
    { id: "notes", title: "Ghi chú", content: <NotesSection /> },
  ]}
  main={<Tabs>...</Tabs>}
/>

Bài toán

Người, doanh nghiệp và deal dùng cùng một khung trong Pipedrive: header → dải giai đoạn (chỉ deal) → cột rail gập được → vùng chính. P-D15/P-D16 đặt khung đó vào packages/ui dưới tên DetailRail, nhưng khung đó sở hữu tab thay vì cấp slot, nên mỗi host muốn một cách lấp phần phải khác nhau sẽ phải đoán. RecordShell tách rail khỏi quyết định "phần phải là gì" -- host luôn tự dựng main.

Khi nào sử dụng

Nên dùng

Màn chi tiết người, doanh nghiệp hoặc deal: một tập section tham khảo gập được, cộng một vùng chính do host quyết định.

Khi nào không dùng

Tránh dùng

Dựng từ

Anatomy

States

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

Seam — host sở hữu gì

Composite không biết nó đang hiển thị người, doanh nghiệp hay deal -- không gõ chữ nghiệp vụ ở tầng này. Host sở hữu toàn bộ chữ nghĩa, dữ liệu trong từng section, section nào mở sẵn (defaultOpen), và toàn bộ nội dung main kể cả việc có tab hay không.

API & triển khai

Design tokens

--nf-foundation-layout-context-panel (bề rộng rail từ small trở lên), --nf-foundation-space-6 (giữa header/strip/hai cột), --nf-foundation-space-4 (giữa các section trong rail và trong main), --nf-foundation-space-3 (giữa các dòng trường trong một section -- do host áp dụng trong content), --nf-foundation-space-2 (giữa nhãn và giá trị trên cùng dòng). small là breakpoint đặt tên duy nhất repo này cho phép literal px (theme.css), cùng ngưỡng xếp chồng mà PageHeader đã dùng. Qua Accordion: --nf-component-accordion-*.

Do / Don't