هيكل Skeleton

يوفر صورًا نائبة قبل اكتمال تحميل المحتوى. كتل العنصر النائب aria-hidden تخفيها عن قارئ الشاشة، وتُعلم الحاوية بتغيّر حالة التحميل عبر aria-busy وaria-live؛ ويحترم تأثير التدفق prefers-reduced-motion.

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

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

<script setup lang="ts">
import { ref } from 'vue'

const skeletonLoading = ref(true)
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>اكتمل تحميل المحتوى: طارت كل الطيور عالية، وانصرفت الغيمة الوحيدة ساكنة.</p>
  </LhSkeleton>
  <!-- تبديل حالة التحميل -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'إظهار المحتوى' : 'إظهار الهيكل' }}
  </LhButton>
</template>

<script>
export default {
  data() {
    return { skeletonLoading: true }
  },
}
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>اكتمل تحميل المحتوى: طارت كل الطيور عالية، وانصرفت الغيمة الوحيدة ساكنة.</p>
  </LhSkeleton>
  <!-- تبديل حالة التحميل -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'إظهار المحتوى' : 'إظهار الهيكل' }}
  </LhButton>
</template>

تركيب الصورة الرمزية

تركيب الصورة الرمزية

<script setup lang="ts">
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

إيقاف التأثير

هيكل ثابت

<script setup lang="ts">
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

كتلة العنصر النائب المستقلة SkeletonItem

SkeletonItem

<script setup lang="ts">
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

Skeleton API

Props

الخاصية	الوصف	النوع	الافتراضي
loading	حالة تحميل (عند false تُعرض الفتحة default)	boolean	true
rows	عدد أسطر النص	number	3
avatar	تضمين عنصر نائب دائري للصورة الرمزية	boolean	false
animated	تفعيل التأثير	boolean	true
sx	خصائص التخطيط السريع sx	LhSxProps	—

Slots

الفتحة	الوصف
default	المحتوى الحقيقي الذي يُعرض عندما يكون loading يساوي false

SkeletonItem API

Props

الخاصية	الوصف	النوع	الافتراضي
variant	شكل كتلة العنصر النائب	'text' | 'rect' | 'circle'	'text'
animated	تفعيل التأثير	boolean	true
sx	خصائص التخطيط السريع sx	LhSxProps	—

متغيّرات السمة

المتغيّر	الوصف	الافتراضي
--lh-skeleton-bg	لون خلفية كتلة العنصر النائب	لون الحبر (text-regular) بمزيج شفافية 10%
--lh-skeleton-highlight	لون التدفق البارز	تفتيح لون الخلفية نحو الأبيض بنسبة 45%
--lh-skeleton-radius	الانحناء الأساسي	--lh-border-radius-small

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

• كتل العنصر النائب aria-hidden="true"، لا تدخل قراءة الشاشة
• الحاوية aria-busy="true" + aria-live="polite"، تُذيع تلقائيًا بعد تبديل المحتوى عند اكتمال التحميل
• عند prefers-reduced-motion: reduce يُوقف تأثير التدفق تلقائيًا

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/skeleton/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhSkeletonProps

export interface LhSkeletonProps {
  /** هل هي حالة تحميل (عند false تُعرض الفتحة default بالمحتوى الحقيقي) */
  loading?: boolean
  /** عدد أسطر النص */
  rows?: number
  /** تضمين عنصر نائب دائري للصورة الرمزية */
  avatar?: boolean
  /** تفعيل التأثير */
  animated?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** شكل كتلة العنصر النائب */
  variant?: LhSkeletonVariant
  /** تفعيل التأثير */
  animated?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhSkeletonVariant _{(مأخوذ من @lh-ui/share/core/skeleton)}

/** شكل كتلة العنصر النائب للهيكل */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'