Message (رسالة)

رد خفيف الوزن في طبقة عائمة عامة: نجاح / فشل العملية، حالة الشبكة وغيرها. تُركَّب في حاوية أحادية، وتتكدّس الرسائل المتعددة من الأعلى إلى الأسفل.

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

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

import { message } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('تم الحفظ بنجاح')

دوال message

دالة	الوصف	القيمة المعادة
info / success / warning / error / danger	إظهار رسالة	{ close }
loading	إظهار رسالة تحميل (لا تُغلق تلقائيًا افتراضيًا)	{ close }
destroyAll	إغلاق جميع الرسائل وإلغاء تركيب الحاوية	void

يُستخدم المُعرّف المُعاد للإغلاق الإيجابي:

const handle = message.loading('جارٍ الرفع…', { duration: 0 })
// ...
handle.close()

LhMessageOptions

خاصية	الوصف	النوع	الافتراضي
duration	المللي ثانية قبل الإغلاق التلقائي، و0 يعني عدم الإغلاق التلقائي (دلالة loading افتراضيًا 0)	number	3000
showClose	هل يُظهر زر الإغلاق	boolean	false
offset	الإزاحة عن أعلى إطار العرض بالبكسل	number	20
closeLabel	aria-label الخاص بزر الإغلاق	string	حزمة اللغة (zh-CN: 关闭提示)
onClose	رد الاستدعاء عند الإغلاق	() => void	—
sx	خصائص التخطيط السريع	SxProps	—

مقابلة الأحداث في نسخة Vue

يقابل message.success('x') استدعاء LhMessage.success('x') في plus؛ ويقابل close() الخاص بالمُعرّف استدعاء LhMessage.close(id) في plus. وتعتمد جهة React على القيمة المُعادة بدلًا من id عام.

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

النجاح / المعلومات هي role="status" (إعلان في الطابور)، والخطأ / التحذير هما role="alert" (إعلان فوري)، بنمط Alert و Notification نفسه.

الأنماط

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