تحميل Loading
غطاء تحميل لملء الشاشة أو لمنطقة محدودة: يجمد تفاعل المستخدم ويُظهر رسالة انتظار في سيناريوهات مثل الإرسال وتحميل القوائم.
الاستخدام الأساسي
منطقة قائمة الأعمال (هدف تركيب الغطاء الموضعي)
عند lock=true تُقفل التمرير في هذه المنطقة وتُجمّد التفاعلات (inert).
import { loading } from '@lh-ui/react'
import '@lh-ui/react/style/loading'
const handle = loading.show({ text: 'جارٍ الإرسال…' })
setTimeout(() => handle.close(), 1500)
// التركيب على منطقة محددة بدلًا من ملء الشاشة
loading.show({ target: cardRef.current })
دوال loading
| دالة | الوصف | القيمة المعادة |
|---|---|---|
| show | إظهار الغطاء | { close } |
| closeAll | إغلاق جميع النسخ النشطة (دون حركة الخروج) | void |
const handle = loading.show({ target: '#card', lock: true })
handle.close()
LhLoadingOptions
| خاصية | الوصف | النوع | الافتراضي |
|---|---|---|---|
| target | هدف التركيب: سلسلة مُحدِّد / عنصر؛ وعند عدم تمريره يكون لملء الشاشة | string | HTMLElement | ملء الشاشة (body) |
| text | نص الرسالة | string | حزمة اللغة (zh-CN: 加载中…) |
| background | لون خلفية القناع (قيمة CSS background) | string | rgba(255,255,255,72%) |
| lock | هل يُقفل التمرير (في وضع ملء الشاشة يقفل body، وعند تحديد هدف يقفل الهدف نفسه) | boolean | true |
يُركَّب loading على أي عنصر هدف (ملء الشاشة أو منطقة محدودة)، ولا يمكنه مشاركة حاوية أحادية، لذا يعتمد نمط
createRoot لكل نسخة على حدة: تمسك كل نسخة بجذرها ومُعرّف الاستعادة الخاص بها. وتُعيد show المتكررة على الهدف نفسه إلغاء تركيب النسخة القديمة أولًا.
إلى جانب قفل تمرير الهدف، يضيف الغطاء غير الشامل الخاصية inert إلى الهدف لتجميد تفاعلات محتواه؛ وبعد الإغلاق تُستعاد
overflow / inert / position تلقائيًا (تُضاف relative مؤقتًا للأهداف ذات تموضع static).
الغطاء هو role="status" + aria-busy="true"، وي ُعلن النص كـ aria-label؛
بينما يكون الرسم الدوّار زخرفة (aria-hidden).
يعيد الغطاء استخدام طريقة رسم spinner الخاصة بزر button (.lh-button__spinner)، فيجب استيراد
@lh-ui/react/style/button في الصفحة أيضًا لتظهر حركة الدوران.
الأنماط
import '@lh-ui/react/style/loading'