AvatarGroup

Beberapa orang pada satu baris: anggota tim, petugas satu pickup, peserta satu diskusi. Yang diurusnya adalah hal yang tidak dimiliki satu avatar — tumpang-tindihnya, batas jumlahnya, dan cara seluruhnya dibacakan.

Dasar

Isi items dengan anggotanya; tiap item menerima src, name, dan color seperti Avatar tunggal. Pakai max begitu anggotanya lebih dari enam: sisanya menjadi satu disc +N.

Seluruh anggota

  • RH
  • BN
  • DL
  • AS
  • SR
  • JP

Dibatasi 4, sisanya menjadi +N

  • RH
  • BN
  • DL
  • AS

Ukuran sm, dipakai di dalam baris tabel

  • RH
  • BN
  • DL
PU-2048 · MRF Cakung

Kotak, untuk perusahaan atau armada

  • KB
  • MC

Satu daftar, bukan sejumlah gambar

Kelompok dirender sebagai ul, jadi pembaca layar menyebut namanya, jumlah anggotanya, lalu nama tiap orang. Karena itu label menamai kelompoknya — "Operator shift pagi" — dan bukan tiap wajah.

  • Disc +N membawa namanya dalam bentuk kata ("2 lainnya"), sementara angka +2-nya disembunyikan dari pembaca layar supaya tidak dibacakan dua kali. Ganti kalimatnya lewat overflowLabel bila perlu lebih jelas: "2 operator lainnya".
  • Kelompok kosong tidak menggambar apa pun — bukan daftar kosong yang diumumkan sebagai "list, 0 item".

Yang perlu diketahui

  • Cincin pemisahnya memakai warna surface-raised. Itu yang membuat tiap disc terlepas dari disc di belakangnya, dan itu sebabnya kelompok ini untuk kartu dan panel. Di atas bidang navy, cincinnya akan salah warna.
  • Tumpang-tindihnya sengaja dangkal. Disc di sini membawa inisial, dan tumpang-tindih sepertiga disc — yang lazim di tempat lain — memotong satu huruf sampai "BN" terbaca "3N". Angkanya diukur per ukuran, bukan dipilih.
  • Wajah pertama di atas. Yang paling kiri paling sering dibaca, jadi ia yang utuh; disc +N berada paling belakang.

API

PropTipeDefaultKeterangan
itemsW4cAvatarGroupItem[][]Anggota kelompok. Tiap item menerima src, name, initials, icon, dan color sendiri.
maxnumber—Jumlah yang digambar sebelum sisanya menjadi satu disc +N. Tanpa ini semuanya digambar, dan di atas sekitar enam sudah tidak terbaca.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Ukuran seluruh anggota. Tumpang-tindihnya mengikuti ukuran ini.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'auto''auto'Nada untuk anggota yang tidak membawa color sendiri. auto menurunkan nada dari nama, jadi orang yang sama selalu berwarna sama.
squarebooleanfalseKotak membulat, bukan bundar — untuk perusahaan, lokasi, atau armada.
labelstring—Nama kelompoknya, misalnya "Operator shift pagi". Kelompok diberi satu nama; tiap wajah tidak dinamai sendiri.
overflow-labelstring—Teks yang dibacakan sebagai ganti +N. Bawaannya "N lainnya".

Atribut lain diteruskan ke ul pembungkusnya, termasuk class untuk tata letak.