اسنک بار

نکته

این المان باید خارج از محتوای صفحه قرار گیرد

اسنک‌بارها در اصل تُست‌های بزرگ‌تری هستند، بنابراین، برای جلوگیری از افزودن جاوا اسکریپت اضافی و نوشتن توابع گسترده برای آن‌ها، اسنک‌بکارها را با استفاده از سیستم تُست ارائه شده توسط بوت‌استرپ ایجاد کردیم. این کار استفاده از آنها را در با کدنویسی آسان میکند و همچنین اندازه فایل را پایین نگه میدارد، زیرا فریم ورک به تنهایی سنگین است.

چگونه یک اسنک بار را فعال کنم؟

data-toast=unique-snackbar-id را به هر دکمه ای که میخواهید برای راه اندازی اسنک بار از آن استفاده کنید، اضافه کنید.

چگونه یک اسنک بار را با کدنویسی فعال کنم؟

مستندان بوت‌استرپ را بررسی کنید. سیستم تست آنها برای اسنک‌بارها هم کار خواهد کرد.

ساختار اسنک بار

html

<div
  id="UNIQUE_ID"
  class="snackbar-toast UTILITY_COLORS"
  data-bs-delay="3000"
  data-bs-autohide="true">
  <i class="fa fa-check mr-3"></i>your text
</div>

کد بالا یک اسنک بار ایجاد میکند. این کد باید در خارج از محتوای صفحه قرار گیرد. کد باید دارای آی دی مشخص باشد که از طریق کدنویسی یا از طریق سیستم data-toast="unique-id" برای راه‌اندازی اسنک بار استفاده میکنید. تأخیر data-bs-delay در میلی ثانیه و در کد بالا نشان داده شده است، به این معنی که پس از 3 ثانیه به طور خودکار ناپدید میشود.