Toast

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

مؤلفه toast شبیه کادر هشدار (به انگلیسی: Alert Box) است که هنگامی که اتفاقی رخ دهد، تنها برای چند ثانیه نمایش داده می‌شود (مثلاً زمانی که کاربر برروی یک کلید کلیک کند، فرمی را ثبت کند و غیره)[۱]

نحوه ایجاد Toast

برای ایجاد toast از کلاس .toast استفاده کرده و .toast-header و یک .toast-body داخل آن اضافه کنید:

1 <div class="toast">
2   <div class="toast-header">
3     Toast Header
4   </div>
5   <div class="toast-body">
6     Some text inside the toast body
7   </div>
8 </div>
نکته: toastها باید با jQuery مقداردهی اولیه (به انگلیسی: Initialize) شوند: عنصر مورد نظر را انتخاب و متد toast() را فراخوانی کنید.

کد زیر همهٔ “toast”‌های سند را نشان می‌دهد:

مثال

1 <script>
2 $(document).ready(function(){
3   $('.toast').toast('show');
4 });
5 </script>

مشاهدهٔ نتیجه


آشکار و پنهان کردن Toast

بطور پیش فرض toastها پنهان هستند. از ویژگی data-autohide="false" برای نمایش آن بطور پیش فرض استفاده کنید. برای بستن آن از یک عنصر <button> استفاده کرده و data-dismiss="toast" را به آن اضافه کنید:

مثال

 1 <div class="toast" data-autohide="false">
 2   <div class="toast-header">
 3     <strong class="mr-auto text-primary">Toast Header</strong>
 4     <small class="text-muted">5 mins ago</small>
 5     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
 6   </div>
 7   <div class="toast-body">
 8     Some text inside the toast body
 9   </div>
10 </div>

مشاهدهٔ نتیجه

به کلاس‌های mr-auto, ml-2 و mb-1 دقت می‌کنید؟ آنها برای اضافه کردن حاشیه‌های مشخص به کار می‌روند.

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

مرجع کامل Toast بوت استرپ

برای دستیابی به مرجع کامل همهٔ امکانات toast، متدها و رویدادها (به انگلیسی: Events)، به مرجع کامل Toast JS بوت استرپ ما مراجعه کنید.


منابع آموزشی