Avatar
Bir kişiyi ya da kurumu temsil eden yuvarlak bir görsel, ya da gri yüzey (tray) üzerinde baş harfler. AvatarGroup birden çok avatar'ı üst üste dizer ve fazlasını bir sayıyla gösterir.
<Avatar name="Ada Lovelace" />
<Avatar name="Grace Hopper" />
<Avatar name="Linus" />Import
import { Avatar, AvatarGroup, getInitials } from "@merid/react";Örnekler
Boyutlar
xs 24px, sm 32px, md 40px (varsayılan), lg 48px, xl 64px.
<Avatar name="Ada Lovelace" size="xs" />
<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Ada Lovelace" size="md" />
<Avatar name="Ada Lovelace" size="lg" />
<Avatar name="Ada Lovelace" size="xl" />Görsel ve fallback
Fotoğraf için src ver. Görsel yoksa ya da yüklenemezse avatar, name'den türetilen baş harflere döner: ilk ve son kelimenin ilk harfi. initials bunları ezer (en fazla iki karakter gösterilir).
<Avatar name="Bozuk Görsel" src="/does-not-exist.png" />
<Avatar name="Acme Corporation" initials="AC" />Grup
max görünen avatar sayısını sınırlar; kalanlar bir “+N” çipine toplanır. Çip hizalı dursun diye grubun size değerini avatar'larınkiyle aynı yap.
<AvatarGroup label="Proje üyeleri" max={3} size="sm">
<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Grace Hopper" size="sm" />
<Avatar name="Alan Turing" size="sm" />
<Avatar name="Katherine Johnson" size="sm" />
<Avatar name="Edsger Dijkstra" size="sm" />
</AvatarGroup>API referansı
Avatar
Bir span render'lar; ref ve diğer span attribute'ları iletilir.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
nameZorunlu | string | – | Kişinin ya da kurumun adı. Hem erişilebilir ad hem de baş harflerin kaynağı. |
src | string | – | Görsel URL'i. Yoksa ya da yüklenemezse baş harflere döner. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Çap: 24, 32, 40, 48 ya da 64px. |
initials | string | – | Türetilen baş harfleri ezer (en fazla 2 karakter gösterilir). |
AvatarGroup
role="group" taşıyan bir div render'lar.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
label | string | – | Grubun erişilebilir adı, örneğin "Proje üyeleri". `aria-label` ya da `aria-labelledby` vermiyorsan zorunlu; vermezsen geliştirme ortamında uyarı loglanır. |
max | number | – | Gösterilecek en fazla avatar sayısı; kalanlar bir +N çipine toplanır. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Taşma çipinin boyutu; avatar'ların boyutuyla aynı yap. |
children | ReactNode | – | Avatar elemanları. |
getInitials
getInitials(name: string): string en fazla iki büyük harf döndürür: getInitials("Ada Lovelace") sonucu "AL", getInitials("Linus") sonucu "L".
Stil verme
| Seçici | Değerler |
|---|---|
.mrd-avatar | Root daire |
.mrd-avatar__image | <img> elemanı |
.mrd-avatar__fallback | Baş harfler |
.mrd-avatar-group, .mrd-avatar-group__overflow | Grup satırı ve +N çipi |
data-size | xs · sm · md · lg · xl |
data-status | image · fallback |
Component değişkeni: --mrd-avatar-size, her boyut için ayarlanır.
Erişilebilirlik
- Her avatar,
nameile adlandırılan birrole="img"'dir; içteki görselinalt=""değeri vardır ve baş harfler gizlidir, böylece ad yalnızca bir kez okunur. - Taşma çipi “N more” olarak okunur. Bu metin şu an sabit ve İngilizce; Türkçe arayüzde değiştirilemiyor.
- Grup
role="group"taşır; listenin bağlamı olsun diye onulabelile adlandır (“Proje üyeleri”). - Avatar, kişinin görünen adının hemen yanında duruyorsa ad iki kez okunur; bu durumda avatar'a
aria-hiddenver.
Kullanım ilkeleri
Yap
Görsel olsa bile her zaman gerçek name'i ver; hem fallback hem de erişilebilir ad odur.
Kaçın
“Kullanıcı” gibi yer tutucu bir ad vermek ya da baş harfleri bir e-posta adresinden tahmin ettirmek.