Avatar
AvatarGroup hiển thị một nhóm người hoặc thực thể bằng các avatar xếp cạnh nhau, chồng lên nhau hoặc chia trong một vòng tròn.
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.
// npm install yugen-uiimport { AvatarGroup, AvatarGroupItem } 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.
Layout
spread (mặc định), stack có viền tách nền, pie chia 2–3 avatar trong một vòng tròn.
Kích thước
Dùng chung thang size của Avatar: 20, 24, 32 (mặc định), 40, 48, 64, 96.
Tràn & danh sách đầy đủ
maxAvatars giới hạn số ô (tính cả nút tràn). Bấm “+N” hoặc “…” để xem danh sách trong Popover.
Pie
Gọn nhất cho không gian hẹp; cả vòng tròn là nút mở danh sách thành viên.
Cách dùng
- Đặt aria-label mô tả nhóm (ví dụ “Thành viên dự án”).
- Dùng stack khi không gian hẹp, spread khi cần nhìn rõ từng người.
- Giữ cùng một size cho mọi avatar trong nhóm.
- Không hiển thị quá 5–6 avatar cùng lúc — dùng maxAvatars.
- Không dùng layout pie cho nhóm đông: hình tròn chỉ chia được 2–3 ảnh.
- Không dùng AvatarGroup cho một người duy nhất — dùng Avatar hoặc Persona.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| layout"spread" | "stack" | "pie" | Mặc định: "spread" | Cách sắp xếp avatar. |
| size20 | 24 | 32 | 40 | 48 | 64 | 96 | Mặc định: 32 | Kích thước mọi avatar trong nhóm. |
| maxAvatarsnumber | Mặc định: 5 | Số ô tối đa (tính cả nút tràn); không áp dụng cho pie. |
| overflowIndicator"count" | "icon" | Mặc định: "count" | Nút tràn hiện “+N” hoặc icon “…”. |
| overflowLabelstring | Mặc định: — | Nhãn đọc sau số đếm của nút mở danh sách ("+2 …"); với overflowIndicator="icon" là toàn bộ tên của nút. |
| AvatarGroupItem | Mặc định: color "colorful" | Thông tin từng thành viên. |
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.avatarGroup
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| liststring aria-label danh sách thành viên trong popover. | Mặc định (tiếng Anh)"Members" | messagesVi"Danh sách thành viên" |
| viewAll(count: number) => string Tên nút ở dạng pie (mở danh sách đầy đủ). | Mặc định (tiếng Anh)(count) => (count === 1 ? "View 1 member" : `View ${count} members`) | messagesVi(count) => `Xem ${count} thành viên` |
| viewMore(count: number) => string Tên nút tràn "+N" / "…". | Mặc định (tiếng Anh)(count) => (count === 1 ? "View 1 more member" : `View ${count} more members`) | messagesVi(count) => `Xem thêm ${count} thành viên` |