English
VietnameseArk UI + Tailwind CSS v4
Ark Rating Group
Thành phần đánh giá số sao được xây dựng trên nền tảng @ark-ui/react/rating-group, tương thích Tailwind CSS v4, hỗ trợ đầy đủ half-star (nửa sao), phím điều hướng, ARIA chuẩn WAI-ARIA và tích hợp biểu mẫu.
Chưa có thao tác nào
Cơ bản (Basic)
Sử dụng tiện ích ArkRatingGroup gói gọn với label, value indicator và input ẩn.
Rê chuột để xem trước điểm, click để lưu đánh giá.
Có điều khiển (Controlled)
Quản lý giá trị bằng state bên ngoài, bắt sự kiện onValueChange và các nút gán điểm nhanh.
Đánh giá nửa sao (allowHalf)
Tùy chọn allowHalf cho phép chọn bước 0.5 với visual clipping mượt mà và hỗ trợ phím mũi tên.
Nửa bên trái của mỗi ngôi sao biểu thị mức 0.5. Phím mũi tên hỗ trợ tăng/giảm bước 0.5.
Kích thước & Kiểu dáng (Sizes & Variants)
Hỗ trợ 4 kích cỡ (xs, sm, md, lg) và 4 phong cách hiển thị (default, subtle, bordered, card).
Biểu tượng tùy biến (Custom Hearts)
Sử dụng ArkRatingGroup.ItemContext để thay thế icon ngôi sao bằng icon trái tim hoặc biểu tượng riêng.
4/5 tim
Compound API
Tự do sắp xếp từng thành phần: Root, Label, Control, Item, Context để xây dựng UI linh hoạt.
5/7
1234567
Quản trị State với useRatingGroup
Khởi tạo state bằng hook useRatingGroup và truyền vào RootProvider để điều khiển từ bên ngoài.
Trạng thái (States)
Các trạng thái disabled, readOnly và required được gán chuẩn ARIA và thuộc tính dữ liệu.
Tích hợp Biểu mẫu (Form Submission)
HiddenInput tự động đồng bộ giá trị với FormData khi người dùng gửi biểu mẫu.