هيكل Skeleton

عنصر نائب أثناء انتظار تحميل المحتوى.

الاستخدام الأساسي

الاستخدام الأساسي

import { LhSkeleton } from '@lh-ui/react'

export default function Demo() {
  return <LhSkeleton avatar rows={2} sx={{ w: 300 }} />
}

Skeleton Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
loading	إظهار الهيكل (عند false تُعرَض العناصر الفرعية)	boolean	—	true
rows	عدد صفوف النص	number	—	3
avatar	تضمين عنصر نائب دائري للصورة الرمزية	boolean	—	false
animated	تفعيل الحركة	boolean	—	true
sx	خصائص تخطيط سريعة	SxProps	—	—

SkeletonItem Props

LhSkeletonItem كتلة عنصر نائب مُصدَّرة بشكل مستقل، يمكن استخدامها منفردةً لتكوين أي هيكل مرغوب.

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
variant	شكل كتلة العنصر النائب	'text' | 'rect' | 'circle'	—	'text'
animated	تفعيل الحركة	boolean	—	true
className	صنف مُلحَق	string	—	—
style	أنماط مضمَّنة مُلحَقة	CSSProperties	—	—
sx	خصائص تخطيط سريعة	SxProps	—	—

import { LhSkeletonItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, width: 300 }}>
      <LhSkeletonItem variant="circle" />
      <div style={{ flex: 1 }}>
        <LhSkeletonItem style={{ marginBottom: 8 }} />
        <LhSkeletonItem style={{ width: '60%' }} />
      </div>
    </div>
  )
}

خوارزمية عرض الصف

عند rows > 1 يتقلَّص الصف الأخير إلى 60% لمحاكاة تنسيق الفقرات الحقيقي؛ ويجب أن يكون للعنصر الجذري عرض محدَّد (لأن عرض الصف نسبي).

إمكانية الوصول

يُخرِج حاوية الهيكل aria-busy="true" + aria-live="polite"؛ وجميع كتل العنصر النائب aria-hidden، وعند جهوزية البيانات يُعيد قارئ الشاشة قراءة المحتوى الحقيقي. وتتدهور الحركة تلقائيًا إلى عنصر نائب ثابت تحت prefers-reduced-motion.

الأنماط

import '@lh-ui/react/style/skeleton'