Avatar

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Avatar } from '@bigbang/ui';

Kaynak

Avatar.tsx

Storybook

Avatar · Playground

Avatar, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Avatar } from '@bigbang/ui';

<Avatar name="Kullanıcı 1" src="/kisiler/kullanici-1.png" status="online" />;

Parça prop tipleri de dışa açılır: AvatarImageProps, AvatarFallbackProps, AvatarStatusProps, AvatarGroupProps.

Özellikler

src

Açıklama

Görsel adresi. Yüklenirken ya da yüklenemezse yedek gösterilir. Yalnızca yedek göstermek için boş bırakın.

Tür

string

nameZorunlu

Açıklama

Kişinin ya da şirketin tam adı. Erişilebilir ad olur; baş harfleri ve yedek rengini belirler. Boş metin yer tutucu simge gösterir.

Tür

string

kind

Açıklama

Kişi ya da şirket. Şirket varsayılan olarak yuvarlatılmış karedir ve adı yoksa bina yer tutucusu alır.

Tür

Kind

Varsayılan

'person'

size

Açıklama

24, 32, 40, 48 ya da 64 px.

Tür

Size

Varsayılan

'sm'

shape

Açıklama

Daire ya da yuvarlatılmış kare (radius-md). Kişi için varsayılan circle, şirket için square.

Tür

'circle' | 'square'

Varsayılan

'circle'

status

Açıklama

Sağ alt uçta (satır sonu tarafı) 2 px yüzey halkalı durum noktası. Durum erişilebilir adın da parçasıdır, ör. "Kullanıcı 1 (çevrimiçi)".

Tür

Status

decorative

Açıklama

Avatarı ekran okuyuculardan gizler. Ad yanında yazılıysa kullanın, böylece iki kez okunmaz. Bu durumda durum da duyurulmaz.

Tür

boolean

Varsayılan

false

delay

Açıklama

Görsel yüklenirken yedeğin gösterilmeden önce bekleyeceği milisaniye; hızlı bağlantıda baş harf titremesini önler.

Tür

number

onLoadingStatusChange

Açıklama

Görsel idle, loading, loaded ya da error durumuna geçince çağrılır.

Tür

(status: 'idle' | 'loading' | 'loaded' | 'error') => void

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve hizalama. Boyut ve rengi değiştirmek için kullanmayın.

Tür

string

children

Açıklama

Özel parçalar (Avatar.Image, Avatar.Fallback, Avatar.Status). Verilmezse avatar parçaları özelliklerden kurar.

Tür

ReactNode

Bunların dışında yerel öznitelikler (id, data-*) kök öğeye iletilir. role, aria-label ve aria-hidden Avatar tarafından verilir.

Parçalar

Parça	Öğe	Özellikler
Avatar.Image	<img>	src (varsayılan: Avatar’ın src değeri) ve yerel görsel öznitelikleri. alt boştur.
Avatar.Fallback	<span>	children: baş harflerin ve simgenin yerine geçer.
Avatar.Status	<span>	status (varsayılan: Avatar’ın status değeri). Ekran okuyucudan gizlidir.
Avatar.Group	<div>	max, size, className, aria-label. Rolü group; kalanlar için “+N” sayacı.

children verirseniz Avatar kendi görsel, yedek ve durumunu çizmez; parçaları siz dizersiniz.

Veri öznitelikleri

• data-component="avatar", data-kind, data-size, data-shape: kök öğede. Grup data-component="avatar-group" taşır.
• data-part: image, fallback, status, count. Durum noktası ayrıca data-status taşır.

Dil

Baş harfler Provider dilinin büyük harf kurallarıyla yazılır; Provider yoksa Türkçe kullanılır. Durum, kişi, şirket ve sayaç adları ui.avatar.* metinleridir.

import { Avatar, Provider } from '@bigbang/ui';

<Provider locale="en-GB">
  <Avatar name="Kullanıcı 1" status="busy" />
</Provider>;