Toast
پرش به ناوبری
پرش به جستجو
مؤلفه 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">×</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 بوت استرپ ما مراجعه کنید.
منابع آموزشی