اسکلت بارگذاری — Skeleton

Skeletonکپی کد جای‌نگهدار محتوایی است که ساختارش از پیش معلوم است؛ مثل یک فهرست، کارت یا تصویر. با نمایش آن از پرش چیدمان هنگام رسیدن داده جلوگیری می‌شود. جای shimmer گرادیانی را پالس کدری (opacityکپی کد) گرفته است، چون گرادیان در استاندارد رنگ TDS ممنوع است. Skeletonکپی کد تزئینی و aria-hiddenکپی کد است؛ وضعیت بارگذاری را SkeletonGroupکپی کد با aria-busyکپی کد و یک برچسب فقط‌صفحه‌خوان اعلام می‌کند.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/feedback/skeleton/کپی کد

import { Skeleton, SkeletonGroup } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

پایه: متن چندخطی

import { Skeleton, SkeletonGroup } from '@tokapps/tuk';export function SkeletonText() {  return (    <SkeletonGroup>      <Skeleton lines={3} />    </SkeletonGroup>  );}

حالت پیشرفته: کارت با آواتار و اندازهٔ ثابت

import { Skeleton, SkeletonGroup } from '@tokapps/tuk';export function SkeletonCard() {  return (    <SkeletonGroup label="در حال بارگذاری پروفایل">      <div style={{ display: 'flex', gap: 'var(--tds-space-3)', alignItems: 'center' }}>        <Skeleton shape="circle" width={48} height={48} />        <div style={{ flex: 1 }}>          <Skeleton width="40%" />          <Skeleton lines={2} />        </div>      </div>    </SkeletonGroup>  );}

حالت بارگذاری و پایان بارگذاری

import { Skeleton, SkeletonGroup } from '@tokapps/tuk';export function SkeletonToggle({ loading, body }: { loading: boolean; body: string }) {  return (    <SkeletonGroup loading={loading}>      {loading ? <Skeleton shape="rect" height={160} /> : <p>{body}</p>}    </SkeletonGroup>  );}

همهٔ پیکربندی‌ها

Skeletonکپی کد

SkeletonGroupکپی کد

ساختار و اسلات‌ها

• تک‌خطی یا شکل: span[data-tds="skeleton"]کپی کد با data-shapeکپی کد (textکپی کد، rectکپی کد، circleکپی کد) و data-printکپی کد.
• چندخطی: span[data-tds="skeleton"][data-multiline="true"]کپی کد با span[data-part="line"]کپی کد؛ خط آخر data-last="true"کپی کد دارد.
• گروه: div[data-tds="skeleton-group"]کپی کد با aria-busyکپی کد (فقط در بارگذاری)؛ در حالت بارگذاری، span[data-tds="visually-hidden"][role="status"]کپی کد با برچسب.
• بنیان ثابت: ساختار بالا، aria-hiddenکپی کد روی اسکلت و ارتباط گروه با aria-busyکپی کد. قابل‌تغییر: اندازه، childrenکپی کد، توکن‌ها.

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

• شکل: textکپی کد، rectکپی کد، circleکپی کد.
• اندازه: widthکپی کد و heightکپی کد (رشته یا عدد).
• چندخطی: linesکپی کد برای متن.
• وضعیت گروه: loadingکپی کد و labelکپی کد (قابل ترجمه).
• چاپ: print="show"کپی کد در صورت لزوم.
• توکن سطح کامپوننت: --tds-skeleton-bgکپی کد، --tds-skeleton-radiusکپی کد، --tds-skeleton-text-heightکپی کد، --tds-skeleton-line-gapکپی کد، --tds-skeleton-last-line-widthکپی کد، --tds-skeleton-rect-heightکپی کد، --tds-skeleton-circle-sizeکپی کد، --tds-skeleton-pulse-durationکپی کد، --tds-skeleton-opacity-lowکپی کد، --tds-skeleton-opacity-highکپی کد.
• نقاط توسعه: classNameکپی کد، styleکپی کد، data-*کپی کد و childrenکپی کد روی گروه.

تغییرات ممنوع (بنیان ثابت)

• حذف aria-hiddenکپی کد از اسکلت‌ها (خوانده نشوند).
• حذف aria-busyکپی کد از گروه در حال بارگذاری یا حذف برچسب role="status"کپی کد.
• افزودن گرادیان یا shimmer گرادیانی (مطابق استاندارد رنگ TDS).
• تغییر data-tdsکپی کد یا ترتیب خطوط چندخطی.
• استفاده از اسکلت برای خطا یا نبودن محتوا.

RTL، کیبورد و صفحه‌خوان

• RTL: اندازه‌ها منطقی (inline-sizeکپی کد) هستند. خط آخر با --tds-skeleton-last-line-widthکپی کد (۶۰٪) کوتاه می‌شود.
• کیبورد: غیرتعاملی؛ فوکوس نمی‌گیرد.
• صفحه‌خوان: اسکلت‌ها خوانده نمی‌شوند. وضعیت بارگذاری با aria-busyکپی کد و role="status"کپی کد با متن برچسب اعلام می‌شود. با loading={false}کپی کد هر دو حذف می‌شوند.
• رنگ: اطلاعاتی منتقل نمی‌کند؛ برچسب متنی معادل صفحه‌خوان است.

صدا، حرکت، چاپ و کاهش حرکت

• صدا: ندارد.
• حرکت: پالس با opacityکپی کد از tds-skeleton-pulseکپی کد و مدت --tds-skeleton-pulse-durationکپی کد با منحنی --tds-ease-softکپی کد. نام معنایی skeleton.pulseکپی کد است.
• کاهش حرکت: در data-reduced-motion="true"کپی کد یا prefers-reduced-motion: reduceکپی کد پالس حذف و بلوک با کدری کامل ثابت می‌شود.
• چاپ: پیش‌فرض hideکپی کد؛ جای‌نگهدار در کاغذ معنا ندارد.

توکن‌ها

• معنایی (از طریق توکن کامپوننت): پس‌زمینهٔ --tds-skeleton-bgکپی کد به --tds-surface-pressedکپی کد وصل است.
• کامپوننتی: --tds-skeleton-*کپی کد (فهرست بالا).
• مقیاس: --tds-ease-softکپی کد، --tds-radius-smکپی کد، --tds-radius-fullکپی کد، --tds-space-*کپی کد برای مقادیر پیش‌فرض.
• مسیر فایل توکن: packages/tokens/src/component/skeleton.cssکپی کد.
• مسیر فهرست توکن مصرفی: packages/tuk/src/feedback/skeleton/Skeleton.tokens.tsکپی کد.

قرارداد ARCH

• Skeleton آیکون ندارد؛ اگر آیکونی لازم شد، از Iconکپی کد و نام معنایی استفاده کنید.
• تم فقط حرکت (skeleton.pulseکپی کد) و توکن را تغییر می‌دهد؛ گرادیان مجاز نیست.
• Skeleton gesture ندارد.
• کاهش حرکت همواره بر تنظیم تم مقدم است.

نکات

• برای پیشرفت قابل اندازه‌گیری از Progress استفاده کنید.
• وقتی داده نیست یا خالی است از EmptyState استفاده کنید.
• برای فهرست‌های چندستونی همراه با جدول از Table همراه با اسکلت استفاده کنید.