📌 Toast یک پیام کوتاه و کوچک است که معمولاً در گوشه صفحه نمایش داده می‌شود و برای اعلان‌ها، موفقیت، خطا یا هشدارها کاربرد دارد.
این کامپوننت به صورت خودکار یا با تعامل کاربر ظاهر و ناپدید می‌شود.

✅ Toast ساده

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">پیام سیستم</strong>
      <small>همین حالا</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
    </div>
    <div class="toast-body">
      این یک پیام نمونه Toast است.
    </div>
  </div>
</div>

<script>
  const toastEl = document.querySelector('.toast');
  const toast = new bootstrap.Toast(toastEl);
  toast.show(); // نمایش Toast
</script>

✅ موقعیت‌های مختلف Toast

• گوشه پایین راست: position-fixed bottom-0 end-0

• گوشه پایین چپ: position-fixed bottom-0 start-0

• گوشه بالا راست: position-fixed top-0 end-0

• گوشه بالا چپ: position-fixed top-0 start-0

✅ Toast با رنگ‌های مختلف

<div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-success text-white">
    <strong class="me-auto">موفقیت</strong>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    عملیات با موفقیت انجام شد!
  </div>
</div>

• کلاس‌های رنگ مثل bg-success, bg-danger, bg-warning برای نشان دادن نوع پیام استفاده می‌شوند.

✅ Toast با زمان‌بندی و Autohide

<div class="toast" data-bs-delay="3000" data-bs-autohide="true">
  <div class="toast-header">
    <strong class="me-auto">پیام</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    این Toast پس از ۳ ثانیه خودکار ناپدید می‌شود.
  </div>
</div>

<script>
  const toastEl = document.querySelector('.toast');
  const toast = new bootstrap.Toast(toastEl);
  toast.show();
</script>

• data-bs-autohide="true" → ناپدید شدن خودکار

• data-bs-delay="3000" → مدت زمان نمایش به میلی‌ثانیه

📌 نکات مهم:

• Toast نیاز به JS بوت‌استرپ دارد.

• می‌توان چند Toast همزمان نمایش داد.

• به کمک position-fixed و toast-container می‌توان موقعیت نمایش Toast را تنظیم کرد.