Alert
کامپوننت x-alert برای نمایش پیامهای هشدار، موفقیت، خطا یا اطلاعرسانی به کاربر طراحی شده است. این کامپوننت از انواع مختلف استایل، آیکن، پیام و ساختار انعطافپذیر پشتیبانی میکند و امکان نمایش دکمههای عملیاتی و محتوای سفارشی را نیز فراهم میسازد.
ویژگیها
- پشتیبانی از انواع مختلف هشدار مانند
success،danger،warning،infoو ... - امکان افزودن آیکن دلخواه با کلاس FontAwesome
- قابلیت تعیین رنگ پسزمینه و نوع و ضخامت حاشیه
- پشتیبانی از دکمه بستن هشدار (close)
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
title | string | null | عنوان هشدار که در بالای کامپوننت نمایش داده میشود |
variant | string | "primary" | نوع هشدار: primary, secondary, success, danger, warning, info, info-2, light, dark |
icon | string | null | کلاس آیکن FontAwesome برای نمایش در ابتدای هشدار |
message | string | null | متن پیام اصلی داخل هشدار |
background | string | null | کلاس رنگ پسزمینه سفارشی (مانند bg-success) |
class | string | null | کلاسهای سفارشی CSS برای شخصیسازی بیشتر |
borderStyle | string | "solid" | نوع خط حاشیه: solid, dashed, dotted, ... |
showCloseButton | boolean | false | آیا دکمه بستن در گوشه نمایش داده شود یا خیر |
inline | boolean | false | نمایش عنوان و پیام بهصورت درونخطی |
اسلاتها
| نام اسلات | توضیحات |
|---|---|
default | محتوای اصلی هشدار (در صورت استفاده، title و message نادیده گرفته میشوند) |
مثالها
نمونه ۱: هشدار موفق با پیام ساده
<x-alert
title="موفق"
variant="success"
message="کاربر شما با موفقیت درج شد"
showCloseButton="true"
/>