هيكل Skeleton

عنصر نائب أثناء تحميل المحتوى. يقدّم LhSkeleton عنصراً نائباً مركّباً (صورة رمزية + أسطر نص)، بينما يتيح LhSkeletonItem التركيب الحرّ حسب الشكل.

هيكل تحميل

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 24px; align-items: flex-start; flex-wrap: wrap">
      <div style="width: 260px">
        <p class="demo-note">avatar + rows + animated</p>
        <LhSkeleton :loading="loading" :rows="3" avatar animated>
          <div>
            <strong>لوحة رحلة بين الجبال والجدول</strong>
            <p>فان كوان، عهد سونغ الشمالية. تُرسم الصخور بنقوش مطرية، بأسلوب مهيب.</p>
          </div>
        </LhSkeleton>
      </div>
      <div style="width: 260px">
        <p class="demo-note">تركيب الأشكال بحرية مع SkeletonItem</p>
        <LhSkeletonItem variant="rect" style="width: 100%; height: 120px" animated />
        <LhSkeletonItem variant="text" style="margin-top: 12px" animated />
        <div class="demo-row" style="gap: 12px; margin-top: 12px">
          <LhSkeletonItem variant="circle" style="width: 40px; height: 40px" animated />
          <LhSkeletonItem variant="text" style="flex: 1" animated />
        </div>
      </div>
    </div>
    <p class="demo-note">عند loading=false يُعرض المحتوى الحقيقي</p>
    <LhSkeleton :loading="false" :rows="2">
      <p>هذا محتوى حقيقي: بعد إيقاف loading يحلّ المحتوى محل الهيكل في الفتحة.</p>
    </LhSkeleton>
    <LhButton size="small" style="margin-top: 12px" @click="toggle">
      {{ loading ? 'إيقاف حالة التحميل' : 'إعادة التحميل' }}
    </LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),
  methods: {
    toggle() {
      this.loading = !this.loading
    },
  },
}
</script>

Skeleton Props

خاصية	الوصف	النوع	الافتراضي
loading	هل هو في حالة تحميل (عند false يُعرض المحتوى الحقيقي للفتحة الافتراضية)	boolean	false
rows	عدد أسطر النص	number	—
avatar	هل يُدرج عنصر صورة رمزية دائرية نائباً	boolean	false
animated	هل تُفعَّل الحركة	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

SkeletonItem Props

خاصية	الوصف	النوع	الافتراضي
variant	شكل الكتلة النائبة	'text' \| 'rect' \| 'circle'	'text'
animated	هل تُفعَّل الحركة	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

Slots

الفتحة الافتراضية لـ LhSkeleton: المحتوى الحقيقي الذي يُعرض عندما يكون loading=false.