Kbd
Mẫu chuẩnHiển thị một phím tắt mà người dùng có thể bấm. Một phím một Kbd -- tổ hợp là nhiều Kbd cạnh nhau.
Playground
Đổi brand, theme, phím và cách trình bày. Ba cách trình bày dưới đây không phải prop -- chúng là ba cách người gọi ghép nhiều Kbd, tự viết trong nơi gọi.
Kbd không tương tác -- không hover, không focus, không disabled. Hiển thị một phím tắt không tự tạo ra phím tắt; trình xử lý phải do nơi gọi gắn.
import { Kbd } from "@nexobox/ui";
<Kbd>K</Kbd>Khi nào sử dụng
Nên dùng
Hiển thị một phím tắt mà người dùng có thể bấm -- trong menu, trong ô tìm kiếm, trong tài liệu, trong gợi ý trợ giúp. Một tổ hợp là nhiều Kbd cạnh nhau, nối bằng dấu trong prose do nơi gọi viết.
Tránh dùng
Mã nguồn hay tên biến -- đó là code. Một nút bấm được -- Kbd không tương tác, nó chỉ mô tả một phím. Chữ viết tắt hay nhãn trạng thái -- đó là một pill/badge, và repo chưa có primitive đó trong catalogue.
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Root | Phần tử <kbd> thật, không phải span hay code. Một Kbd = một phím. |
Không có phần con nào khác -- không icon, không indicator, không slot cho glyph tổ hợp.
Variants & states
Không có variant, không có size, không có prop keys, không có bản đồ ký hiệu theo hệ điều hành. Hover / focus / disabled / loading / error / empty: không có.
Một Kbd cho một phím duy nhất.
Hai Kbd cạnh nhau, dấu nối là chữ thường viết ngoài Kbd, không phải một prop.
whitespace-nowrap giữ tên phím dài trên một dòng, không gãy chữ.
Kbd nằm giữa một câu tiếng Việt mà không phá nhịp dòng.
Không có variant, không có size, không có prop keys, không có bản đồ ký hiệu theo hệ điều hành.
Design tokens
Root đọc --nf-semantic-surface-subtle, --nf-semantic-border-control, --nf-semantic-text-primary, --nf-foundation-radius-small, --nf-foundation-space-2, --nf-foundation-space-1, và năm thuộc tính --nf-foundation-typography-data-*. Không tồn tại --nf-component-kbd-* -- đã kiểm bằng grep, kết quả 0.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| …(mọi thuộc tính kbd gốc) | — | Truyền thẳng qua ...props. Không có prop riêng nào. |
KbdProps = ComponentPropsWithoutRef<"kbd"> — id, className, style và mọi thuộc tính kbd gốc đều truyền thẳng.