تنبيه Alert

تنبيه ثابت على مستوى الصفحة (غير حتمي، على عكس Message). ترتبط دلالته بدور live region: تستخدم warning/danger الخاصية role="alert" للإعلان الفوري، بينما تستخدم info/success الخاصية role="status" للإعلان اللطيف.

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

أربع دلالات

رسالة محايدة.

اكتملت العملية بنجاح.

مساحة القرص على وشك النفاد.

انقطع الاتصال بالشبكة.

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

<template>
  <!-- رسالة محايدة -->
  <LhAlert>رسالة محايدة.</LhAlert>
  <!-- success -->
  <LhAlert type="success">اكتملت العملية بنجاح.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">مساحة القرص على وشك النفاد.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">انقطع الاتصال بالشبكة.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- رسالة محايدة -->
  <LhAlert>رسالة محايدة.</LhAlert>
  <!-- success -->
  <LhAlert type="success">اكتملت العملية بنجاح.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">مساحة القرص على وشك النفاد.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">انقطع الاتصال بالشبكة.</LhAlert>
</template>

الأيقونة والعنوان

أيقونة وعنوان

تم الحفظ بنجاح

تمت مزامنة المستند مع السحابة.

فشل الحذف

هذا العنصر قيد التحرير من قبل مساهم آخر.

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

<template>
  <!-- تم الحفظ بنجاح -->
  <LhAlert type="success" show-icon title="تم الحفظ بنجاح">تمت مزامنة المستند مع السحابة.</LhAlert>
  <!-- فشل الحذف -->
  <LhAlert type="danger" show-icon title="فشل الحذف">هذا العنصر قيد التحرير من قبل مساهم آخر.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- تم الحفظ بنجاح -->
  <LhAlert type="success" show-icon title="تم الحفظ بنجاح">تمت مزامنة المستند مع السحابة.</LhAlert>
  <!-- فشل الحذف -->
  <LhAlert type="danger" show-icon title="فشل الحذف">هذا العنصر قيد التحرير من قبل مساهم آخر.</LhAlert>
</template>

قابل للإغلاق

قابل للإغلاق

انقر الزر الموجود على اليسار لإغلاقي.

نص مخصص لزر الإغلاق.

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

<template>
  <!-- نص الإغلاق الافتراضي -->
  <LhAlert closable>انقر الزر الموجود على اليسار لإغلاقي.</LhAlert>
  <!-- نص إغلاق مخصص -->
  <LhAlert closable close-label="فهمت">نص مخصص لزر الإغلاق.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- نص الإغلاق الافتراضي -->
  <LhAlert closable>انقر الزر الموجود على اليسار لإغلاقي.</LhAlert>
  <!-- نص إغلاق مخصص -->
  <LhAlert closable close-label="فهمت">نص مخصص لزر الإغلاق.</LhAlert>
</template>

النمط البسيط

نمط بسيط

نمط بسيط بخلفية فاتحة وحدّ واضح.

يناسب الخلفيات الفاتحة.

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

<template>
  <!-- warning بسيط -->
  <LhAlert type="warning" plain show-icon>نمط بسيط بخلفية فاتحة وحدّ واضح.</LhAlert>
  <!-- danger بسيط -->
  <LhAlert type="danger" plain show-icon>يناسب الخلفيات الفاتحة.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning بسيط -->
  <LhAlert type="warning" plain show-icon>نمط بسيط بخلفية فاتحة وحدّ واضح.</LhAlert>
  <!-- danger بسيط -->
  <LhAlert type="danger" plain show-icon>يناسب الخلفيات الفاتحة.</LhAlert>
</template>

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

الخصائص

الخاصية	الوصف	النوع	الافتراضي
type	النوع الدلالي	"info" | "success" | "warning" | "danger"	'info'
title	العنوان (يمكن أيضًا استخدام فتحة title)	string	—
closable	ما إذا كان قابلًا للإغلاق	boolean	false
showIcon	ما إذا كانت أيقونة الدلالة تُعرض	boolean	false
plain	نمط بسيط بخلفية فاتحة (خلفية بيضاء وحدّ)	boolean	false
closeLabel	اسم إمكانية الوصول لزر الإغلاق (إذا لم يُمرَّر، تُؤخذ القيمة من حزمة اللغة alert.close)	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

الأحداث

الحدث	الوصف	المعاملات
close	يُطلق بعد النقر على زر الإغلاق	—

الفتحات

الفتحة	الوصف
title	عنوان مخصص
default	محتوى الوصف

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

• warning/danger ← role="alert" (إعلان فوري)؛ info/success ← role="status" (إعلان لطيف)
• زر الإغلاق هو عنصر <button> حقيقي، ويأخذ قيمة aria-label من حزمة اللغة alert.close، مع حلقة تركيز :focus-visible
• الخلفية الفاتحة للألوان الدلالية مشتقّة عبر color-mix() من اللون الدلالي، وتتبع السمة والوضع الفاتح/الداكن تلقائيًا

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

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

LhAlertProps

export interface LhAlertProps {
  /** النوع الدلالي */
  type?: LhAlertType
  /** العنوان (يمكن أيضًا استخدام فتحة title) */
  title?: string
  /** ما إذا كان قابلًا للإغلاق */
  closable?: boolean
  /** ما إذا كانت أيقونة الدلالة تُعرض */
  showIcon?: boolean
  /** ما إذا كان النمط بسيطًا بخلفية فاتحة */
  plain?: boolean
  /** اسم إمكانية الوصول لزر الإغلاق (إذا لم يُمرَّر، تُؤخذ القيمة من حزمة اللغة alert.close) */
  closeLabel?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhAlertType _{(مأخوذ من @lh-ui/share/core/alert)}

/** النوع الدلالي للتنبيه */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'