Yugen UI

Rating

Rating cho phép người dùng chấm điểm bằng sao; RatingDisplay hiển thị điểm chỉ đọc.

Rating là một nhóm radio: Tab để vào, mũi tên để đổi điểm, rê chuột để xem trước. Hỗ trợ nửa sao (step 0.5), ba màu brand / marigold / neutral và bốn kích thước. RatingDisplay kèm giá trị và số lượt đánh giá.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Rating, RatingDisplay } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Màu

neutral (mặc định), brand, marigold.

3.5 / 5 sao

Nửa sao (controlled)

step={0.5}: mỗi sao có hai vùng bấm.

RatingDisplay

Hiển thị chỉ đọc kèm giá trị, số lượt; compact chỉ hiện một sao.

Kích thước

small (12px), medium (16px), large (20px), extra-large (28px, mặc định).

Cách dùng

Nên
  • Luôn có aria-label mô tả đối tượng được chấm điểm.
  • Dùng RatingDisplay kèm số lượt để người dùng đánh giá độ tin cậy.
  • Giữ một màu sao nhất quán trong toàn sản phẩm.
Không nên
  • Không dùng Rating cho lựa chọn không mang tính thang điểm — dùng RadioGroup.
  • Không dùng màu sao làm tín hiệu duy nhất — hiện kèm giá trị số.

Props

Prop · KiểuMặc địnhMô tả
value / defaultValuenumberMặc định: 0Điểm hiện tại (0 = chưa chấm).
onValueChange(value: number) => voidMặc định: —Gọi khi chọn điểm.
maxnumberMặc định: 5Số sao.
step1 | 0.5Mặc định: 1Cho phép nửa sao.
color"neutral" | "brand" | "marigold"Mặc định: "neutral"Màu sao.
size"small" | "medium" | "large" | "extra-large"Mặc định: "extra-large"Cỡ sao 12 / 16 / 20 / 28px.
itemLabel(value: number) => stringMặc định: —Nhãn đọc cho từng mức điểm.
RatingDisplay.count / compactnumber / booleanMặc định: —Số lượt; chỉ hiện một sao.
RatingDisplay.sizeRatingSizeMặc định: "medium"Cỡ sao và chữ.
RatingDisplay.showValuebooleanMặc định: trueHiện chữ giá trị cạnh các sao. Tên cũ hideValue đã lỗi thời (bỏ ở 1.0).

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.rating

Khoá · KiểuMặc định (tiếng Anh)messagesVi
item(value: number, valueText: string) => string

Nhãn đọc cho từng giá trị của Rating; valueText là value đã định dạng theo locale.

Mặc định (tiếng Anh)(value, valueText) => (value === 1 ? `${valueText} star` : `${valueText} stars`)messagesVi(_value, valueText) => `${valueText} sao`
summary(valueText: string, max: number) => string

Nhãn đọc của RatingDisplay; valueText là điểm đã định dạng theo locale.

Mặc định (tiếng Anh)(valueText, max) => `Rated ${valueText} out of ${max} stars`messagesVi(valueText, max) => `Đánh giá ${valueText} trên ${max} sao`
count(count: number, countText: string) => string

Số lượt đánh giá, nối sau summary (", …"); countText là count đã định dạng theo locale.

Mặc định (tiếng Anh)(count, countText) => (count === 1 ? `${countText} rating` : `${countText} ratings`)messagesVi(_count, countText) => `${countText} lượt`