Avatar
Foydalanuvchi rasmi yoki bosh harflari: ismdan doimiy rang, holat nuqtasi va guruh.
'use client';
import { Avatar } from '@akhatmirzo/ui';
const people = [
'Sarvar Abduxoliqov',
'Malika Rahimova',
'Jasur Karimov',
"O'tkir Hoshimov",
'Dilnoza Yusupova',
'Rustam Qodirov',
];
export default function AvatarBasic() {
return (
<div className="flex flex-wrap items-center gap-3">
{people.map((name) => (
<Avatar key={name} name={name} />
))}
</div>
);
}
Import
import { Avatar, AvatarGroup } from '@akhatmirzo/ui';Qachon ishlatish
- Odam yoki tashkilotni ko'rsatish uchun — izohlar, chat, jadval qatorlari, profil menyusi.
- Har doim
namebering, rasm bo'lsa ham: rasm yuklanmasa, bosh harflar va rang ismdan olinadi, ekran o'quvchi esa ismni o'qiydi. - Bir ism — doim bir rang. Rang ismdan hisoblanadi, shuning uchun foydalanuvchini ro'yxatda rangidan ham tanish mumkin.
- Ko'p ishtirokchi bo'lsa —
AvatarGroupvamax: ortiqchasi "+N" ga yig'iladi.
O'lchamlar va shakl
size: xs 24, sm 32, md 40 (standart), lg 48, xl 64px. shape: circle (standart) —
odamlar uchun, square — do'kon, tashkilot, loyiha uchun.
'use client';
import { Avatar } from '@akhatmirzo/ui';
export default function AvatarSizes() {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-wrap items-center gap-3">
<Avatar size="xs" name="Malika Rahimova" />
<Avatar size="sm" name="Malika Rahimova" />
<Avatar size="md" name="Malika Rahimova" />
<Avatar size="lg" name="Malika Rahimova" />
<Avatar size="xl" name="Malika Rahimova" />
</div>
<div className="flex flex-wrap items-center gap-3">
<Avatar size="sm" shape="square" name="Bahor Market" />
<Avatar size="md" shape="square" name="Bahor Market" />
<Avatar size="lg" shape="square" name="Bahor Market" />
</div>
</div>
);
}
Rasm va zaxira ko'rinish
src berilsa rasm chiqadi; yuklanguncha va yuklanmasa — bosh harflar. Ism ham bo'lmasa, odam
ikonkasi (yoki fallback) ko'rsatiladi. Ikkinchi avatarda rasm manzili ataylab noto'g'ri.
'use client';
import { Avatar } from '@akhatmirzo/ui';
export default function AvatarImage() {
return (
<div className="flex flex-wrap items-center gap-3">
<Avatar size="lg" src="https://github.com/Akhatmirzo.png" name="Akhatmirzo" />
<Avatar size="lg" src="/mavjud-emas.png" name="Gulnora Aliyeva" />
<Avatar size="lg" />
</div>
);
}
Holat
status: online, offline, busy — burchakda rangli nuqta. Holat ekran o'quvchi uchun
aria-label ga ham qo'shiladi: "Sarvar Abduxoliqov (onlayn)".
'use client';
import { Avatar } from '@akhatmirzo/ui';
export default function AvatarStatus() {
return (
<div className="flex flex-wrap items-center gap-4">
<Avatar name="Sarvar Abduxoliqov" status="online" />
<Avatar name="Malika Rahimova" status="offline" />
<Avatar name="Rustam Qodirov" status="busy" />
<Avatar name="Jasur Karimov" shape="square" size="lg" status="online" />
</div>
);
}
Guruh
AvatarGroup avatarlarni ustma-ust joylaydi. size va shape guruhdan bolalarga o'tadi;
max dan ortiqchasi "+N" bo'lib chiqadi.
+3
'use client';
import { Avatar, AvatarGroup } from '@akhatmirzo/ui';
const team = [
'Sarvar Abduxoliqov',
'Malika Rahimova',
'Jasur Karimov',
'Dilnoza Yusupova',
'Rustam Qodirov',
'Gulnora Aliyeva',
'Bekzod Toshmatov',
];
export default function AvatarGroupDemo() {
return (
<AvatarGroup max={4} aria-label="Loyiha ishtirokchilari">
{team.map((name) => (
<Avatar key={name} name={name} />
))}
</AvatarGroup>
);
}
Props
Avatar
Avatar qolgan barcha <span> atributlarini qabul qiladi (children dan tashqari).
| Prop | Tip | Standart | Tavsif |
|---|---|---|---|
src | string | — | Rasm manzili |
alt | string | — | Ekran o'quvchi uchun nom (berilmasa — name) |
name | string | — | Bosh harflar va fon rangi shu ismdan olinadi |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | O'lcham: 24 / 32 / 40 / 48 / 64px (guruh ichida — guruhniki) |
shape | 'circle' | 'square' | 'circle' | Shakl (guruh ichida — guruhniki) |
status | 'online' | 'offline' | 'busy' | — | Burchakdagi holat nuqtasi |
fallback | ReactNode | — | Ism ham, rasm ham bo'lmaganda (standart — odam ikonkasi) |
labels | { status?: Partial<Record<AvatarStatus, string>> } | { status: { online: 'onlayn', offline: 'oflayn', busy: 'band' } } | Holat nomlari (ekran o'quvchi uchun) |
AvatarGroup
AvatarGroup qolgan barcha <div> atributlarini (aria-label ...) qabul qiladi.
| Prop | Tip | Standart | Tavsif |
|---|---|---|---|
max | number | — | Ko'pi bilan nechta avatar ko'rsatiladi; qolgani "+N" |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Barcha avatarlar o'lchami |
shape | 'circle' | 'square' | 'circle' | Barcha avatarlar shakli |
labels | { more?: (count: number) => string } | — | Ekran o'quvchi uchun "+N" matni (standart — "Yana N ta") |
Yordamchi funksiyalar
Avatar ishlatadigan mantiq alohida ham eksport qilinadi:
import { getAvatarColor, getInitials } from '@akhatmirzo/ui';
getInitials('Sarvar Abduxoliqov'); // 'SA'
getInitials("o'tkir hoshimov"); // 'OH'
getAvatarColor('Sarvar Abduxoliqov'); // 'bg-danger-soft text-danger-soft-foreground'Data atributlari
Avatar ildizida: data-size, data-shape, data-status, data-state (loading ·
loaded · fallback).
Accessibility
role="img"vaaria-label—altyokinamedan, holat bo'lsa qavs ichida qo'shiladi. Ichidagi bosh harflar va rasmaria-hidden— ekran o'quvchi "SA" ni emas, to'liq ismni o'qiydi.- Nomsiz avatar (na
alt, naname) bezak hisoblanadi va butunlay yashiriladi. - Guruh
role="group"; ungaaria-labelbering ("Loyiha ishtirokchilari"). "+N" hamrole="img"va "Yana N ta" deb o'qiladi.