فارغ Empty

عنصر نائب يُعرض في الحالات الفارغة.

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

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

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

وصف مخصّص

import { LhEmpty, LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhEmpty
      description="وصف مخصص"
      actions={<LhButton type="primary">إعادة التحميل</LhButton>}
    />
  )
}

خصائص Empty

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
description	نص الوصف (يُؤخذ من حزمة اللغة empty.description عند عدم تمريره)	ReactNode	—	'暂无数据'
image	عنوان URL لصورة مخصصة	string	—	—
actions	منطقة الإجراءات	ReactNode	—	—
sx	خصائص التخطيط السريع	SxProps	—	—

صورة مخصصة

تمرير الخاصية image أو عقدة children كلاهما يمر عبر حاوية الصورة المخصصة (يُقيّد المُعدِّل --custom كلاً من max-width: 160px / max-height: 120px)؛ وعند عدم تمرير أي منهما يُعرض رسم توضيحي مضمّن برسم الحبر (مُلوّن بمتغيرات السمة، ويتكيّف مع الوضعين الفاتح والداكن تلقائيًا).

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

العنصر الجذر هو role="status" (إعلان لطيف)؛ والرسم الافتراضي يحمل aria-hidden فلا يزعج قارئ الشاشة.

الأنماط

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