Separator
Mẫu chuẩnMột vạch chia hai vùng nội dung ngang hàng trong cùng một bề mặt.
Playground
Đổi brand, theme, orientation và decorative. Không có prop size, không có prop variant.
decorative={false} (mặc định): role="separator" — trình đọc màn hình thông báo một ranh giới giữa hai nhóm.
import { Separator } from "@nexobox/ui";
<span>Xem hồ sơ</span>
<Separator />
<span>Cài đặt thông báo</span>Khi nào sử dụng
Nên dùng
Chia hai vùng nội dung ngang hàng trong cùng một bề mặt: hai nhóm mục trong một menu, phần đầu và phần thân của một thẻ, hai cụm hành động trong một thanh công cụ.
Tránh dùng
Viền quanh một khối — đó là border của chính khối đó. Tạo khoảng cách thị giác — đó là token --nf-foundation-space-*. Chia hai vùng mà bố cục đã tách rõ — thêm vạch khi mắt đã thấy tách là nhiễu.
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Root | div do Radix dựng qua Primitive.div. Mang data-orientation, và role="separator" hoặc role="none" tuỳ decorative. |
Một phần duy nhất. Không có phần con, không có nhãn ở giữa vạch.
Variants & states
Không có variant, không có size, không có separator kèm nhãn ở giữa. hover / focus / disabled / loading / error / empty: không có — Separator không nhận input, không async.
decorative={false} (mặc định). role="separator".
decorative. role="none", bị loại khỏi accessibility tree.
orientation="vertical". Vạch cao bằng hai vùng cạnh nó.
Loading, error, empty: không có. Separator không bất đồng bộ.
Design tokens
Giá trị theo NexoCrew / light đang chọn trong playground. Root đọc --nf-semantic-border-subtle. Không có token --nf-component-separator-* — đã grep packages/ui/styles/nexoframe.tokens.css, kết quả 0. Density: không có, vạch không đọc data-nexo-density.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| orientation | "horizontal" | "horizontal" | "vertical". Đổi layout và aria-orientation. |
| decorative | false | false giữ role="separator"; true chuyển role="none", ẩn khỏi accessibility tree. |
SeparatorProps = ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> — asChild, id, className, style và mọi thuộc tính div gốc đều truyền thẳng xuống Root.