Avatar Component
CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Avatar bileşenleri, kullanıcı profili resimlerini veya baş harflerini kompakt, özelleştirilebilir bir kapta görüntüler. Frutjam'ın CSS özel özellikleriyle oluşturulan avatarlar, arayüzünüzdeki kullanıcıları, katkıda bulunanları veya ekip üyelerini temsil eder. Avatar sistemi, görselleri ve metni, çoklu boyutları, renkleri, şekilleri, durum göstergelerini, halkaları ve grup düzenlemelerini destekler; kullanıcı listeleri, yorumlar, ekip görünümleri, profil bölümleri ve mesajlaşma arayüzleri için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| avatar | Temel | Baş harfleri veya resmi olan dairesel avatar kabı |
| avatar-group | Değiştirici | Birden fazla avatarın örtüşen yığını |
| avatar-ring | Değiştirici | Avatarın etrafına renkli bir halka kenarlığı ekler |
| avatar-circle | Stil | Tamamen dairesel şekil (varsayılan) |
| avatar-rounded | Stil | Yuvarlatılmış dikdörtgen şekli |
| avatar-square | Stil | Yuvarlama olmadan kare şekil |
| avatar-online | Stil | Yeşil çevrimiçi durum göstergesi |
| avatar-away | Stil | Sarı deplasman durum göstergesi |
| avatar-busy | Stil | Kırmızı meşgul durumu göstergesi |
| avatar-offline | Stil | Gri çevrimdışı durum göstergesi |
| avatar-xs | Boyut | Ekstra küçük |
| avatar-sm | Boyut | Küçük |
| avatar-md | Boyut | Orta (varsayılan) |
| avatar-lg | Boyut | Büyük |
| avatar-xl | Boyut | Ekstra büyük |
| avatar-2xl | Boyut | 2x ekstra büyük |
| avatar-primary | Renk | Birincil tema rengi |
| avatar-secondary | Renk | İkincil tema rengi |
| avatar-accent | Renk | Vurgu teması rengi |
| avatar-neutral | Renk | Nötr tema rengi |
| avatar-info | Renk | Bilgi anlamsal rengi |
| avatar-success | Renk | Başarı anlamsal rengi |
| avatar-warning | Renk | Uyarı anlamsal rengi |
| avatar-error | Renk | Hata anlamsal rengi |
| avatar-ring-primary | Renk | Ana renkte halka |
| avatar-ring-secondary | Renk | İkincil renkte halka |
| avatar-ring-accent | Renk | Vurgu renginde halka |
| avatar-ring-neutral | Renk | Nötr renkte halka |
| avatar-ring-info | Renk | Bilgi renginde halka |
| avatar-ring-success | Renk | Başarı renginde yüzük |
| avatar-ring-warning | Renk | Uyarı renginde halka |
| avatar-ring-error | Renk | Hata renginde zil sesi |
Temel Kullanım
Metin baş harfleri veya renkleri ile basit avatarlar oluşturun.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Görsellerle Avatar
Otomatik görüntü yerleştirme ve duyarlı boyutlandırma ile kullanıcı profili fotoğraflarını görüntüleyin.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Avatar Boyutları
Farklı bağlamlar için avatarları ekstra küçükten (xs) 2x büyüğe (2xl) kadar ölçeklendirmek için boyut çeşitlerini kullanın.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Avatarın Renkleri
Görselleri kullanmadığınızda avatarları role, takıma veya duruma göre ayırt etmek için renk çeşitleri uygulayın.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Avatar Şekilleri
Tasarım sisteminize uyacak şekilde dairesel (varsayılan), yuvarlak veya kare şekiller arasından seçim yapın.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Baş Harfleri Olan Avatar
Listelerde, yorum dizilerinde ve ekip bölümlerinde hızlı tanımlama için kullanıcının baş harflerini görüntüleyin.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Durum Göstergeli Avatar
Kullanıcının varlığını veya uygunluğunu (çevrimiçi, çevrimdışı, meşgul, dışarıda) göstermek için avatarları durum rozetleriyle birleştirin.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Halka Kenarlı Avatar
Vurgu, durum vurgulaması veya görsel ayrım için avatarların çevresine dekoratif halkalar ekleyin.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Yüzük Rengi Çeşitleri
Halka renklerini avatar arka plan renklerinden bağımsız olarak seçin.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Avatar Grubu
Ekip üyelerinin ve ortak çalışanların üst üste görüntülenmesi için birden fazla avatarı otomatik negatif kenar boşluğuyla üst üste koyun.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Farklı Boyutlarda Avatar Grubu
Görsel hiyerarşi için birden fazla boyutu bir grup içinde birleştirin.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Durumlu Avatar Grubu
Bir ekip grubundaki her üyenin uygunluk durumunu gösterin.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Kombine Varyantlar
Karmaşık avatar gösterimleri için boyut, renk, şekil, durum ve zil değiştiricileri karıştırıp eşleştirin.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |