Chuyển tới nội dung

Pro đang mở bán trước. Cài đặt mở từ tháng 1/2027. Xem Pro

werewolf-ui
Component

GroupAvatar

Một vòng tròn cỡ Avatar cho một nhóm, chia thành các ô thay vì chồng lên nhau: một thành viên lấp đầy, hai thành viên chia đôi, ba thành viên chiếm một nửa và hai phần tư, bốn trở lên chiếm bốn phần tư với +N cho phần còn lại. Dùng cho nhóm chat hoặc một đội.

  • npm: 0 trực tiếp, 3 tổng
  • registry: 3 trực tiếp, 3 tổng

Xem trước

Props

  • alt
  • size
  • members
import { GroupAvatar } from "@/components/ui/group-avatar"

const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]

<GroupAvatar alt="Nhóm thiết kế" members={designTeam} />

Cách dùng

Khi nào dùng

  • Đại diện cho nhóm chat hay một đội bằng một vòng tròn, như trong ConversationList.
  • Hiện các thành viên của nhóm trong chỗ của một Avatar.

Khi nào không dùng

  • Hiện nhiều người cạnh nhau. Dùng AvatarStack.
  • Một người. Dùng Avatar.
  • Một workspace hay thương hiệu có logo riêng. Dùng Avatar với src.

Biến thể

size

sm 24px, md 32px, lg 40px, như Avatar.

  • sm

  • mdmặc định

  • lg

import { GroupAvatar } from "@/components/ui/group-avatar"

const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]

<GroupAvatar size="sm" alt="Nhóm thiết kế" members={designTeam} />
<GroupAvatar alt="Nhóm thiết kế" members={designTeam} />
<GroupAvatar size="lg" alt="Nhóm thiết kế" members={designTeam} />

Ví dụ

Các cỡ nhóm

Hai, ba, bốn và nhiều thành viên hơn.

import { GroupAvatar } from "@/components/ui/group-avatar"

const pairMembers = [{ name: "Linh Tran" }, { name: "An Pham" }]
const trioMembers = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }]
const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]
const companyMembers = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }, { name: "Hoa Vu" }, { name: "Khoa Ngo" }]

<div className="flex items-center gap-md">
  <GroupAvatar alt="Linh và An" members={pairMembers} />
  <GroupAvatar alt="Nhóm ra mắt" members={trioMembers} />
  <GroupAvatar alt="Nhóm thiết kế" members={designTeam} />
  <GroupAvatar alt="Công ty" members={companyMembers} />
</div>

Cạnh tên

Khi tên nhóm được viết cạnh nó, alt để trống.

Nhóm thiết kế
import { GroupAvatar } from "@/components/ui/group-avatar"

const designTeam = [{ name: "Linh Tran" }, { name: "An Pham" }, { name: "Minh Le" }, { name: "Bao Do" }]

<div className="flex items-center gap-sm">
  <GroupAvatar alt="" size="lg" members={designTeam} />
  <span className="text-sm font-medium text-text-primary">Nhóm thiết kế</span>
</div>

Nên và không nên

Nên

  • Dùng lg cạnh hai dòng chữ, như trong ConversationList.
  • Truyền ảnh khi có; chữ cái là dự phòng.
  • Giữ thứ tự thành viên ổn định, để vòng tròn không đổi giữa các lần xem.

Không nên

  • Đừng dùng nó cho danh sách người cần phân biệt; dùng AvatarStack.
  • Đừng dùng sm cho nhóm từ ba người trở lên khi chữ cái quan trọng; các ô quá nhỏ.
  • Đừng đặt chấm trạng thái lên một ô; đặt nó lên vòng tròn.

Props

TênKiểuGiá trịMặc địnhMô tả
members bắt buộc{ name: string; src?: string; initials?: string; color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple" | "pink" }[]--Các thành viên được hiện, theo thứ tự. Hiện tối đa bốn; quá bốn thì hiện ba và ô thứ tư đếm phần còn lại. color mặc định là blue, green, purple, orange.
alt bắt buộcstring--Tên của nhóm, như Nhóm thiết kế. Truyền chuỗi rỗng khi tên đã được viết cạnh nó.
sizeenumsm | md | lgmdsm 24px, md 32px, lg 40px, như Avatar.

Cấu tạo

PhầnMô tả
rootVòng tròn: 24, 32 hoặc 40px, cắt tròn, chứa lưới các ô với khe 2px.
tileMột thành viên: ảnh của họ, hoặc chữ cái đầu của tên viết tắt hay tên trên cặp màu dịu. Trong vòng 24px, một ô bị chia chỉ hiện màu.
moreÔ xám với +N (9+ khi trên 9) khi nhóm có hơn bốn thành viên.

Khả năng truy cập

Role: img

  • alt đặt tên nhóm (EN `Design team`) trên vòng tròn, một hình ảnh cho trình đọc màn hình. Truyền alt="" khi tên đã được viết cạnh nó.
  • Các ô, chữ cái và ảnh của chúng bị ẩn với trình đọc màn hình; tên nhóm mới là thứ được đọc.
  • Màu chỉ để trang trí, như ở Avatar.

Cài đặt

npx werewolf-ui add group-avatar

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.