Toast و Notification

Toast و Notification را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Modal و Toast لایه‌های موقتی رابط هستند. Modal باید Focus را مدیریت، Escape را پشتیبانی و Scroll پس‌زمینه را کنترل کند؛ Toast باید پیام کوتاه، وضعیت و زمان کافی برای خواندن داشته باشد.

روش پیاده‌سازی

1. Overlay و Panel را در لایه مشخص قرار دهید.
2. Role، نام، Focus اولیه و بستن با Keyboard را پیاده کنید.
3. Toast را در ناحیه زنده مناسب و خارج از مسیر محتوای اصلی نشان دهید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<div class="fixed bottom-6 end-6 z-50 max-w-sm rounded-xl bg-emerald-600 px-5 py-4 text-white shadow-xl">
  تغییرات با موفقیت ذخیره شد.
</div>

خروجی مورد انتظار

Toast موفقیت در پایین سمت منطقی صفحه.

نکات مهم و خطاهای رایج

• ظاهر Modal بدون Focus Trap و بازگرداندن Focus کامل نیست.
• Toast نباید تنها محل نمایش خطای حیاتی باشد.

تمرین پیشنهادی

Modal را با Escape ببندید و بازگشت Focus به دکمه آغازگر را آزمایش کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS