ModeControl
Mẫu chuẩnMột hàng nút cùng bề rộng, khối nền trượt tới chế độ đang chọn. control là viền field của kit. rounded là viên thuốc.
Playground
Đổi viền, size, rồi bấm Trò chuyện hoặc Công việc. Khối nền trượt, không nhảy.
Khi nào sử dụng
Nên dùng
Đổi chế độ của cùng một bề mặt, các nhãn nên chiếm bề rộng bằng nhau. Shell dùng rounded cho Trò chuyện / Công việc.
Tránh dùng
Nhãn dài ngắn khác nhau thì dùng SegmentedControl. Gạch dưới mở một vùng nội dung thì dùng Tabs. Bật tắt thì dùng Switch.
Anatomy
role="radiogroup". Mỗi mục là role="radio". Một khối nền nằm sau mục đang chọn và trượt bằng transform. Mọi cột rộng bằng nhãn dài nhất.
Design tokens
Không có token mới. control đọc radius control, --nf-component-field-border (resolve về semantic.border.control), nền field và bóng field. rounded đọc radius pill, nền subtle, khối nền raised và bóng raised. Chuyển động đọc duration và easing của component.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| options | — | Mảng { value, label }. Bắt buộc. |
| value | — | value đang chọn. |
| onValueChange | — | Gọi với value mới. |
| border | control | control hoặc rounded. |
| size | md | sm / md / lg, cùng bậc cao với Button. |
| disabled | false | Khoá cả nhóm. |
| aria-label | — | Tên của cả nhóm. |
Accessibility
Một điểm dừng Tab, trên mục đang chọn. Mũi tên, Home và End chuyển lựa chọn và focus. Không có panel nội dung đi kèm.