تنبيه Alert

يُستخدم لعرض رسائل تنبيهية مهمة داخل الصفحة.

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

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

معلومات

هذه رسالة معلوماتية.

نجاح

هذه رسالة نجاح.

تحذير

هذه رسالة تحذير (نمط بسيط).

هذه رسالة خطر (بدون عنوان).

مع حالة خارجية

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

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="تنبيه نجاح" showIcon closable>
      هذه رسالة نجاح.
    </LhAlert>
  )
}

خصائص Alert

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
type	النوع	'info' | 'success' | 'warning' | 'danger'	—	'info'
title	العنوان (لا يُعرض صف العنوان عند عدم تمريره)	ReactNode	—	—
closable	هل يمكن الإغلاق	boolean	—	false
showIcon	هل تُعرض أيقونة النوع	boolean	—	false
plain	هل يكون النمط بسيطًا (حد فاتح)	boolean	—	false
closeLabel	اسم إمكانية الوصول الخاص بزر الإغلاق (يأخذ من حزمة اللغة alert.close عند عدم تمريره)	string	—	'关闭警告'
sx	خصائص التخطيط السريع	SxProps	—	—

أحداث Alert

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onClose	يُطلق عند النقر على زر الإغلاق	(event: MouseEvent) => void	@close

الإغلاق غير مُتحكم به داخليًا

عند النقر على زر الإغلاق، يتم إلغاء تركيب Alert مباشرة (دون حركة انتقالية) وإطلاق onClose. لإمكانية إعادة فتحه، غلّفه بعرض مشروط مدفوع بحالة خارجية بدلًا من الاعتماد على الحالة الداخلية للمكوّن.

منطقة قراءة الشاشة (live region) لإمكانية الوصول

عندما يكون type هو warning / danger يُخرج role="alert" (إعلان فوري)، وعندما يكون info / success يُخرج role="status" (إعلان في الطابور)، لتجنب مقاطعة ما يقوم به المستخدم حاليًا.

الأنماط

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