Avatar

42 · Gelişmiş UI

Bir kişiyi ya da kaydı küçük, yuvarlak bir görselle temsil eder. Fotoğraf yoksa addan baş harfler üretilir; renk, durum noktası ve üst üste binen grup görünümü desteklenir.

PRO acun:avatar

Boyutlar

Yoğun tablo ve listelerde xs ya da sm, menü ve kartlarda varsayılan md, profil başlıklarında lg ya da xl seçin. Boyut size prop'uyla verilir.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-4">
    <acun:avatar name="Ayşe Yılmaz" size="xs" />
    <acun:avatar name="Ayşe Yılmaz" size="sm" />
    <acun:avatar name="Ayşe Yılmaz" />
    <acun:avatar name="Ayşe Yılmaz" size="lg" />
    <acun:avatar name="Ayşe Yılmaz" size="xl" />
</div>

Prop	Değerler
`size`	xs \| sm \| md \| lg \| xl

Şekiller

Varsayılan şekil yuvarlaktır. Kurum, ekip ya da ürün gibi kişi olmayan kayıtlar için shape="rounded-sm" ile köşeli kare kullanın.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-4">
    <acun:avatar name="Ayşe Yılmaz" size="lg" />
    <acun:avatar name="Acun Soft" size="lg" shape="rounded-sm" />
</div>

Prop	Değerler
`shape`	circle \| rounded-sm

Baş harfler ve renkler

Fotoğraf verilmediğinde name içindeki ilk iki kelimenin baş harfleri gösterilir ("Ayşe Yılmaz" → AY). Arka plan rengi color ile seçilir; aynı listede kişileri ayırt etmek için farklı renkler kullanabilirsiniz.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-4">
    <acun:avatar name="Ayşe Yılmaz" />
    <acun:avatar name="Mehmet Kaya" color="success" />
    <acun:avatar name="Zeynep Arslan" color="warning" />
    <acun:avatar name="Emre Demir" color="danger" />
    <acun:avatar name="Fatma Şahin" color="info" />
    <acun:avatar name="Can Öztürk" color="secondary" />
</div>

Prop	Değerler
`name`	Ad soyad; baş harfler buradan üretilir
`color`	primary \| secondary \| success \| danger \| warning \| info \| dark (brand = primary, neutral = secondary)

Fotoğraf

src verildiğinde fotoğraf gösterilir; name yine alternatif metin olarak kullanılır. Fotoğraf yüklenemezse boşluk kalmaması için name vermeyi unutmayın.

BLADE

<acun:avatar src="{{ $user->avatar_url }}" :name="$user->name" size="lg" />

Prop	Değerler
`src`	Fotoğrafın adresi

Durum

status sağ altta küçük bir durum noktası ekler: çevrimiçi, çevrimdışı, uzakta ya da meşgul. Sohbet ve ekip listeleri için uygundur.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-4">
    <acun:avatar name="Ayşe Yılmaz" status="online" />
    <acun:avatar name="Mehmet Kaya" color="success" status="offline" />
    <acun:avatar name="Zeynep Arslan" color="warning" status="away" />
    <acun:avatar name="Emre Demir" color="danger" status="busy" />
</div>

Prop	Değerler
`status`	online \| offline \| away \| busy

Gruplar

Birden fazla kişiyi acun:avatar-group ile üst üste bindirilmiş olarak gösterin. Gösterilmeyen kişi sayısını more ile "+N" olarak ekleyin.

CANLI ÖRNEK

<acun:avatar-group :more="4">
    <acun:avatar name="Ayşe Yılmaz" />
    <acun:avatar name="Mehmet Kaya" color="success" />
    <acun:avatar name="Zeynep Arslan" color="warning" />
    <acun:avatar name="Emre Demir" color="info" />
</acun:avatar-group>

Prop	Değerler
`more`	Gösterilmeyen kişi sayısı ("+N"); 0 ise gösterilmez

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`src, name`	`null`	Fotoğraf yoksa addan baş harfler
`size`	`md`	xs · sm · md · lg · xl
`shape`	`circle`	circle · rounded-sm
`status`	`null`	online · offline · away · busy
`color`	`primary`	primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary)
`avatar-group: more`	`0`	"+N" göstergesi
`avatar-group: size`	`md`	"+N" göstergesinin boyutu; avatarlarla aynı verin (xs · sm · md · lg · xl)