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

AvatarStack

Vài người dưới dạng Avatar chồng lên nhau trong một hàng, người đầu tiên nằm trên, rồi một vòng tròn +N cho số còn lại. Dùng cho ai đang soạn tin, ai đã xem tin, ai đang trong cuộc gọi; cho một vòng tròn đại diện cả nhóm, dùng GroupAvatar.

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

Xem trước

Props

  • max
  • size
  • label
  • people
import { Avatar } from "@/components/ui/avatar"
import { AvatarStack } from "@/components/ui/avatar-stack"

<AvatarStack label="Linh, An và Minh">
  <Avatar alt="" color="blue">LT</Avatar>
  <Avatar alt="" color="green">AP</Avatar>
  <Avatar alt="" color="purple">M</Avatar>
</AvatarStack>

Cách dùng

Khi nào dùng

  • Hiện vài người cùng lúc: ai đang soạn tin, ai đã xem tin, ai đang trong cuộc gọi.
  • Gợi ý thành viên của một dự án trong chỗ nhỏ, với +N cho phần còn lại.

Khi nào không dùng

  • Một vòng tròn cho cả nhóm hay đội. Dùng GroupAvatar.
  • Danh sách người để đọc và chọn. Dùng danh sách với Avatar và tên.
  • Một người. Dùng Avatar.

Biến thể

size

Cỡ của các avatar: độ chồng và vòng +N theo cỡ này. Mặc định: cỡ của avatar đầu tiên, nếu không thì md.

  • sm

  • md

  • lg

import { Avatar } from "@/components/ui/avatar"
import { AvatarStack } from "@/components/ui/avatar-stack"

<AvatarStack label="Linh, An và Minh">
  <Avatar alt="" color="blue" size="sm">LT</Avatar>
  <Avatar alt="" color="green" size="sm">AP</Avatar>
  <Avatar alt="" color="purple" size="sm">M</Avatar>
</AvatarStack>
<AvatarStack label="Linh, An và Minh">
  <Avatar alt="" color="blue">LT</Avatar>
  <Avatar alt="" color="green">AP</Avatar>
  <Avatar alt="" color="purple">M</Avatar>
</AvatarStack>
<AvatarStack label="Linh, An và Minh">
  <Avatar alt="" color="blue" size="lg">LT</Avatar>
  <Avatar alt="" color="green" size="lg">AP</Avatar>
  <Avatar alt="" color="purple" size="lg">M</Avatar>
</AvatarStack>

Ví dụ

Ba người

import { Avatar } from "@/components/ui/avatar"
import { AvatarStack } from "@/components/ui/avatar-stack"

<AvatarStack label="Linh, An và Minh">
  <Avatar alt="" color="blue">LT</Avatar>
  <Avatar alt="" color="green">AP</Avatar>
  <Avatar alt="" color="purple">M</Avatar>
</AvatarStack>

Nhiều hơn max

Những người vượt quá max gộp thành một vòng +N.

import { Avatar } from "@/components/ui/avatar"
import { AvatarStack } from "@/components/ui/avatar-stack"

<AvatarStack max={3} label="Linh, An, Minh và 2 người khác">
  <Avatar alt="" color="blue">LT</Avatar>
  <Avatar alt="" color="green">AP</Avatar>
  <Avatar alt="" color="purple">M</Avatar>
  <Avatar alt="" color="orange">B</Avatar>
  <Avatar alt="" color="teal">H</Avatar>
</AvatarStack>

Đã xem bởi

Các avatar nhỏ dưới tin nhắn cho biết ai đã đọc nó.

Linh và An đã xem
import { Avatar } from "@/components/ui/avatar"
import { AvatarStack } from "@/components/ui/avatar-stack"

<div className="flex items-center gap-xs text-xs text-text-secondary">
  <AvatarStack size="sm">
    <Avatar alt="" size="sm" color="blue">LT</Avatar>
    <Avatar alt="" size="sm" color="green">AP</Avatar>
  </AvatarStack>
  Linh và An đã xem
</div>

Nên và không nên

Nên

  • Giữ max ở 3 hoặc 4; vòng +N đếm phần còn lại.
  • Cho mọi avatar cùng một cỡ, và truyền cỡ đó.
  • Nêu tên mọi người bằng chữ cạnh cụm, hoặc bằng label.

Không nên

  • Đừng dùng cụm cho một nhóm; dùng GroupAvatar.
  • Đừng trộn nhiều cỡ trong một cụm.
  • Đừng biến mỗi avatar thành liên kết; phần chồng khiến chúng quá nhỏ để nhấn.

Props

TênKiểuGiá trịMặc địnhMô tả
children bắt buộcnode--Các Avatar cùng cỡ, với alt="".
maxnumber-3Số avatar hiện trước khi phần còn lại gộp thành +N.
sizeenumsm | md | lg-Cỡ của các avatar: độ chồng và vòng +N theo cỡ này. Mặc định: cỡ của avatar đầu tiên, nếu không thì md.
labelstring--Tên của cụm cho trình đọc màn hình, như Linh, An và 2 người khác. Không có nó, cụm bị ẩn với trình đọc màn hình.

Cấu tạo

PhầnMô tả
rootHàng, được xếp từ cuối lên đầu để avatar đầu tiên được vẽ trên cùng mà không cần z-index.
itemMột Avatar, chồng lên avatar kế tiếp một phần tư chiều rộng, với vòng 2px bằng màu phía sau.
moreVòng tròn +N màu xám cho những người vượt quá max, cùng cỡ với các avatar.

Khả năng truy cập

Role: img

  • Với label (EN `Linh, An and 2 others`), cụm là một hình ảnh được đặt tên bằng nó; không có label thì cụm bị ẩn với trình đọc màn hình, dùng khi tên đã được viết cạnh nó.
  • Truyền alt="" cho mọi Avatar bên trong: cụm, hoặc chữ bên cạnh, đã nêu tên họ.
  • Vòng cắt mỗi avatar là màu phía sau cụm (--ring-offset-color, mặc định là nền trang), nên nó không thêm màu riêng.
  • Không tương tác. Để mở danh sách người, đặt cụm trong một nút và đặt tên cho nút.

Cài đặt

npx werewolf-ui add avatar-stack

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.