Avatar

სტუმრის სურათი, ინიციალები და დაჯგუფებული პროფილები.

მაგალითი

ᲜᲑᲐᲙ+1

@llc-conciergia/ui/avatar

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
} from "@llc-conciergia/ui/avatar";

<AvatarGroup max={2}>
  <Avatar>
    <AvatarImage src="data:image/png;base64,broken" alt="ნინო ბერიძე" />
    <AvatarFallback name="ნინო ბერიძე" />
  </Avatar>
  <Avatar>
    <AvatarFallback name="ანა კაპანაძე" />
  </Avatar>
  <Avatar>
    <AvatarFallback name="გიორგი მაისურაძე" />
  </Avatar>
</AvatarGroup>;

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
} from "@llc-conciergia/ui/avatar";

Conciergia CLI

npx @llc-conciergia/cli add avatar

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/avatar.json

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
Avatar: size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	—	ზომა; ნაგულისხმევად md.
Avatar	Base UI Avatar.Root props	—	children, className, render, ref.
AvatarImage	Base UI Avatar.Image props	—	src, alt, onLoadingStatusChange; სურათის აღწერა აუცილებელია.
AvatarFallback: name	string	—	სრული სახელი ხელმისაწვდომობისთვის და პირველი ორი სიტყვის ინიციალები.
AvatarFallback: children / delay	ReactNode / number	—	ინიციალების ჩანაცვლება და გამოჩენის დაყოვნება მილიწამებში.
AvatarFallback	Base UI Avatar.Fallback props	—	className, render, ref.
AvatarGroup: max	number	—	ხილული ავატარების მაქსიმუმი; ნაგულისხმევად 4.
AvatarGroup	div props	—	children ავატარების სია; დანარჩენი ლოკალიზებული +N ნიშნით ჩანს.