کامپوننتها
اسکلت بارگذاری
جای خالی محتوا هنگام بارگذاری؛ از پرش صفحه جلوگیری میکند.
import { Skeleton } from "@kashi-ui/react";
نمونه
<div aria-busy="true" aria-label="در حال بارگذاری">
<Skeleton circle width={40} />
<Skeleton lines={2} />
<Skeleton height={120} />
<Skeleton lines={3} />
</div><div aria-busy="true" aria-label="در حال بارگذاری" class="k-card" style="inline-size:min(100%, 24rem);padding:1.5rem;display:grid;gap:1rem">
<div style="display:flex;gap:12px;align-items:center"><span class="k-skeleton k-skeleton--circle" aria-hidden="true" style="--k-skeleton-width:40px;--k-skeleton-height:40px"></span>
<div style="flex:1"><span class="k-skeleton-group" aria-hidden="true"><span class="k-skeleton k-skeleton--text"></span><span class="k-skeleton k-skeleton--text"></span></span></div>
</div><span class="k-skeleton" aria-hidden="true" style="--k-skeleton-height:120px"></span><span class="k-skeleton-group" aria-hidden="true"><span class="k-skeleton k-skeleton--text"></span><span class="k-skeleton k-skeleton--text"></span><span class="k-skeleton k-skeleton--text"></span></span>
</div>ویژگیها
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
width / height | string | number | 100% / 1em | اندازه |
circle | boolean | false | شکل دایره |
lines | number | — | چند خط متن؛ خط آخر کوتاهتر است |
دسترسپذیری
اسکلت تزئینی است (aria-hidden). روی ظرف بارگذاری aria-busy="true" و یک aria-label بگذارید تا صفحهخوان بداند محتوا در راه است. با prefers-reduced-motion درخشش متوقف میشود.