اخطار و اعلان ها

اخطارها

استفاده از اخطارها پیشفرض بوت‌استرپ به این معنی است که میتوانید از هر یک از مثال‌های نشان‌ داده‌ شده در component-notifications.html استفاده کنید، که شامل یک تگ span برای آیکونی است که میتواند از هر آیکون Fontawesome استفاده کنید.

اعلان های کشویی

نکته

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

هر اعلانی که از بالای صفحه میآید خارج از محتوای صفحه component-notifications.html قرار میگیرد. بیایید کد هر کدام را توضیح دهیم.

توضیح کلی

این فقط منطق کلی سیستم اعلان را توضیح میدهد. پس از بسته شدن کلاس page-content در component-notifications.html بررسی کنید تا نمونه‌های بیشتری را مشاهده کنید. هر اعلان شامل عناصر ساده ای است که میتوانید به راحتی با استفاده از کلاس های کمکی آن را مطابق با نیاز خود تغییر دهید.

html

<div
  id="notification-1"
  data-bs-dismiss="notification-1"
  data-bs-delay="3000"
  data-bs-autohide="true"
  class="notification NOTIFICATION_TYPE bg-dark1-dark">
  <!-- check the component-notifications.html page, after the page-content closes to see more-->
</div>

خط 2: آی دی اعلان را مشخص میکند. در صورتی که بخواهید اعلان را از دکمه ای در صفحه، فعال کنید، از این مورد استفاده میشود. میتوانید با افزودن data-toast="notification-1" آن را فعال کنید. مطمئن شوید که این همیشه یک عدد منحصر به فرد است. این آی دی همچنین برای حذف اعلان از یک دکمه و یا اگر کاربر روی آن ضربه بزند، استفاده میشود.

خط 3: ویژگی data-bs-dismiss است که همان آی دی منحصر به فرد خط 2 را به اشتراک میگذارد. اگر میخواهید اعلان را با ضربه زدن روی آن رد کنید، از آن استفاده میشود.

خط 4: تاخیر اعلان است. این مدت زمانی است که اعلان قبل از خط 5 روی صفحه قابل مشاهده خواهد بود، اگر روی true تنظیم شود، آن را دوباره مخفی میکند.

خط 6: کلاسی است که برای اعلان استفاده میشود و رنگ پس‌زمینه‌ای که میخواهید استفاده کنید.

از چه نوع اعلان هایی میتوانم استفاده کنم؟

میتوانید کلاس NOTIFICATION_TYPE را با هر یک از سبک های زیر جایگزین کنید

• notification-android
• notification-ios
• notification-material

همچنین میتوانید این کلاس را به‌طور کامل حذف کنید و با استفاده از کلاس‌های کمکی به اعلان خود هر طور که میخواهید استایل دهید. بهترین راه برای درک این اعلان‌ها، کپی پیست آن‌ها و تطبیق محتوا با نیازهایتان است.

نکته نکته برای توسعه ‌دهندگان

شما میتوانید با بررسی رفتار Toast JavaScript در Bootstrap، از پیاده‌سازی برنامه‌نویسی‌شده‌ی جاوا اسکریپت برای اعلان‌های کشویی استفاده کنید.