Avatar

Foto orang, lokasi, atau armada dengan cadangan yang selalu terisi: inisial dari namanya, lalu ikon. Ukurannya sejajar dengan tinggi tombol.

Dasar

Ada tiga tingkat isi, dipilih otomatis: foto bila src berhasil dimuat, inisial dari name bila tidak, dan ikon bila nama pun tidak ada. Jadi tidak ada keadaan kosong yang harus ditangani aplikasi.

Rini HartatiFoto
BNInisial
Tanpa nama
Lokasi (square)

Ukuran

Lima ukuran. sm, md, dan lg sengaja sama dengan tinggi tombol berukuran sama (28 / 34 / 40 px), supaya avatar dan tombol dalam satu baris punya tinggi yang sama. xs untuk baris tabel yang padat, xl untuk kepala halaman profil.

RHxs · 24 px
RHsm · 28 px
RHmd · 34 px
RHlg · 40 px
RHxl · 56 px

Warna

Nada latar mengikuti token yang sama dengan Badge dan Alert. auto menurunkan nada dari nama, jadi satu orang selalu punya warna yang sama di seluruh aplikasi tanpa perlu menyimpan apa pun. danger tidak pernah terpilih oleh auto: avatar merah terbaca sebagai ada yang salah dengan orangnya, bukan sebagai warnanya.

NEPRSUWADA

color="auto" — nada diambil dari namanya, selalu sama untuk nama yang sama

RHBNSADSYKAS

Kalau fotonya tidak ada

Foto yang gagal dimuat diperlakukan sama dengan tidak ada foto. src baru selalu dicoba lagi, jadi satu URL rusak tidak membuat foto berikutnya ikut tidak digambar.

Bagus Nugroho

Bagus Nugroho

Foto dimuat dari /avatar/orang-2.svg

Foto gagal dimuat diperlakukan sama dengan tidak ada foto: avatar berpindah ke inisial tanpa menyisakan gambar rusak.

Di dalam baris dan daftar

Ini pemakaian yang paling sering: avatar di depan nama yang sudah tertulis. Di situ avatarnya dekorasi, jadi beri label="" — tanpa itu pembaca layar membacakan nama yang sama dua kali.

  • Rini Hartati

    Koordinator operasional

    Aktif

  • Bagus Nugroho

    Operator timbangan

    Aktif

  • Siti Aminah

    Admin lokasi

    Aktif

Untuk beberapa orang pada satu baris — anggota tim, petugas satu pickup — pakai AvatarGroup, yang mengurus tumpang-tindihnya dan membacakan seluruhnya sebagai satu daftar.

API

Props

PropTipeDefaultKeterangan
srcstring—URL foto. Kalau gagal dimuat, avatar berpindah ke inisial — bukan gambar rusak.
namestring—Siapa atau apa yang diwakili avatar ini: sumber inisial sekaligus nama aksesibelnya.
initialsstring—Inisial yang digambar, menggantikan yang diambil dari name. Untuk nama yang tidak mengikuti pola kata biasa.
iconstring'lucide:user-round'Ikon yang dipakai saat tidak ada foto dan tidak ada nama, misalnya lucide:building-2 untuk lokasi.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'24 / 28 / 34 / 40 / 56 px. Tiga ukuran tengahnya sama dengan tinggi tombol sm, md, dan lg, jadi avatar sejajar dengan kontrol di barisnya.
color'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'auto''neutral'Nada latar untuk inisial dan ikon. auto memilih nada dari namanya dan selalu memberi hasil yang sama untuk nama yang sama.
squarebooleanfalseKotak bersudut tumpul, bukan bulat. Pakai untuk yang bukan orang: perusahaan, lokasi, armada.
labelstring—Nama aksesibel, bawaannya mengikuti name. Isi dengan string kosong di mana namanya sudah tertulis di sebelah avatar.

Atribut lain diteruskan ke elemen span pembungkusnya, termasuk class. Avatar tidak bisa diklik sendiri: bungkus dengan button atau NuxtLink bila perlu, supaya kontrolnya punya nama dan halo fokusnya sendiri.