فارغ Empty

عنصر نائب يُعرض عند خلو البيانات. الحاوية بـ role="status"، وعند ظهور الحالة الفارغة يُبثّها قارئ الشاشة تلقائيًا.

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

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

لا توجد بيانات

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

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

وصف مخصص

وصف مخصص

نتائج البحث فارغة

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

<template>
  <LhEmpty description="نتائج البحث فارغة" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="نتائج البحث فارغة" />
</template>

صورة مخصصة

صورة مخصصة

لا توجد طلبات بعد

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

<template>
  <LhEmpty image="/logo.svg" description="لا توجد طلبات بعد" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="لا توجد طلبات بعد" />
</template>

مع عمليات

مع عمليات

لم تُضَف أي محتويات إلى المفضلة بعد

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

<template>
  <LhEmpty description="لم تُضَف أي محتويات إلى المفضلة بعد">
    <template #actions>
      <LhButton type="primary" size="small">تصفّح المحتوى</LhButton>
      <LhButton size="small">تحديث</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="لم تُضَف أي محتويات إلى المفضلة بعد">
    <template #actions>
      <LhButton type="primary" size="small">تصفّح المحتوى</LhButton>
      <LhButton size="small">تحديث</LhButton>
    </template>
  </LhEmpty>
</template>

واجهة برمجة تطبيقات Empty

الخصائص

الخاصية	الوصف	النوع	الافتراضي
description	نص الوصف (عند عدم تمريره تُؤخذ القيمة من مفتاح اللغة empty.description)	string	—
image	عنوان URL لصورة مخصصة (تُستبدل الرسوم التوضيحية المضمّنة الافتراضية)	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

الفتحات

الفتحة	الوصف	المحتوى الافتراضي
default	منطقة بصرية مخصصة (بديلة للرسوم التوضيحية)	رسوم الحبر الافتراضية
description	وصف مخصص	مفتاح اللغة empty.description
actions	منطقة العمليات	—

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

• الحاوية role="status": تُبثّ تلقائيًا عند ظهور الحالة الفارغة
• الصور الزخرفية بـ alt="" فتُخفى عن قارئ الشاشة، ويحمل النص الوصفي الدلالة

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

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

LhEmptyProps

export interface LhEmptyProps {
  /** نص وصف الحالة الفارغة (عند عدم تمريره تُؤخذ القيمة من مفتاح اللغة empty.description) */
  description?: string
  /** عنوان URL لصورة مخصصة (تُستبدل الرسوم التوضيحية المضمّنة الافتراضية) */
  image?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}