DividerWithLabel

Playground

Đổi brand, theme và nhãn. Bên dưới là một biến thể với một liên kết đặt bên trong nhãn.

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

<DividerWithLabel>Hoặc tiếp tục với</DividerWithLabel>

Bài toán

Một biểu mẫu đăng nhập có hai nhóm hành động khác bản chất: nhập thông tin rồi nộp, và đi bằng đường khác — nhà cung cấp SSO, hoặc chuyển sang trang đăng ký. Hai nhóm ấy cần một ranh giới thị giác có chú thích, vì một đường kẻ trơn chỉ nói "có gì đó đổi" mà không nói đổi thành gì. Một primitive Separator không giải được: nó là một phần tử, còn ở đây cần hai đoạn kẻ co giãn nằm hai bên một khối chữ, và khối chữ đó là thứ mang toàn bộ ý nghĩa nên hai đoạn kẻ phải bị ẩn khỏi cây trợ năng.

Khi nào sử dụng

Nên dùng

Ranh giới có chú thích giữa biểu mẫu chính và hành động thứ cấp: "Hoặc tiếp tục với". Chuyển tiếp giữa hai lối đi trên cùng một trang: "Chưa có tài khoản?" ngay trước liên kết đăng ký. Nhãn ngắn — một câu dài sẽ bóp hai đoạn kẻ về gần không.

Khi nào không dùng

Tránh dùng

Dựng từ

Nó tự vẽ thứ Separator đã làm, và đây là phép đối chiếu hai chiều mà DS-016 clause 4 tồn tại để bắt. Separator là một wrapper mỏng của Radix, và nhận decorative; nó tô đúng cùng token semantic.border.subtle. Vướng mắc là hình học, không phải ngữ nghĩa: Separator ngang đặt w-full, trong khi chỗ này cần flex-1. Một primitive phải nhận một className ghi đè để đứng đúng chỗ là dấu hiệu hoặc composite sai hoặc Separator thiếu một vai. Cách đóng đề xuất: đổi sang Separator decorative và bổ sung cho Separator một cách co giãn trong flex — chạm một primitive đã có consumer nên đây là quyết định riêng, theo dõi bằng dòng ledger W10.21. Cho tới lúc đó, bảng trên nói đúng thứ mã đang làm.

Anatomy

Ba phần, hai trong đó vô hình với trình đọc màn hình. Không có biến thể lệch trái hay lệch phải — nhãn luôn ở giữa vì cả hai vạch cùng flex-1.

States

Hover, focus, disabled: không có — không phải control; không phần nào nhận tiêu điểm.

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

Seam — host sở hữu gì

DividerWithLabel không biết nó chia cái gì với cái gì, và không mang câu chữ nào. Theo ADR-UI-003 clause 2 nó không fetch, không đọc router, không giữ session, không import gì từ next.

API & triển khai

Design tokens

DividerWithLabel đọc --nf-component-auth-divider-gap, -divider-margin-block, --nf-foundation-typography-caption-font-size, --nf-semantic-text-muted, và --nf-semantic-border-subtle cho hai vạch — cùng token Separator dùng. Lỗ hổng đặt tên: hai alias component.auth.divider* gọi tên "auth" dù composite này không còn thuộc auth; nhóm đúng là component.divider.* và chưa tồn tại — theo dõi bằng dòng ledger W10.19. Chiều cao vạch là h-px, 1px trần từ thang Tailwind, không phải foundation.stroke.hairline mà Alert dùng cho viền của nó — hai chỗ vẽ cùng một nét tóc bằng hai nguồn khác nhau.

Do / Don't