Skeleton
ჩატვირთვისას კონტენტის ადგილის დამჭერი. სერვერ-კომპონენტია; prefers-reduced-motion-ის დროს არ პულსირებს.
მაგალითი
import { Skeleton, SkeletonText } from "@llc-conciergia/ui/skeleton";
<div aria-busy="true" className="flex items-center gap-3">
<Skeleton shape="circle" className="size-10" />
<SkeletonText lines={2} />
</div>ინსტალაცია
pnpm add @llc-conciergia/uiimport { Skeleton, SkeletonText } from "@llc-conciergia/ui/skeleton";npx @llc-conciergia/cli add skeletonnpx shadcn@latest add https://ui.conciergia.co/r/skeleton.jsonშენიშვნები
Skeleton aria-hidden-ია: ჩატვირთვა ეკრანის მკითხველს კონტეინერზე aria-busy-ით ან Spinner-ით აცნობეთ. shape="text" სიმაღლეს მშობლის font-size-იდან იღებს (1em).
Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| shape | "rect" | "circle" | "text" | "rect" | მომრგვალება: rounded-md, წრე (aspect-square), ან ტექსტის ხაზი. |
| className | string | — | ზომა (h-*, w-*, size-*). |
| SkeletonText: lines | number | 3 | ხაზების რაოდენობა; ბოლო უფრო მოკლეა. |
| SkeletonText: lineClassName | string | — | კლასები თითოეულ ხაზზე. |