نان تست
با یک نان تست، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، اعلانها را به بازدیدکنندگان خود ارسال کنید.
نان تست ها اعلان های سبک وزنی هستند که برای تقلید از اعلان های فشاری که توسط سیستم عامل های موبایل و دسکتاپ رایج شده اند طراحی شده اند. آنها با فلکس باکس ساخته شده اند، بنابراین به راحتی قابل تراز و قرار دادن هستند.
بررسی اجمالی
نکاتی که هنگام استفاده از پلاگین نان تست باید بدانید:
- اگر جاوا اسکریپت ما را از منبع میسازید، به آن نیاز دارد
util.js
. - نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
- لطفا توجه داشته باشید که شما مسئول قرار دادن نان تست ها هستید.
- اگر نان تست را مشخص نکنید به طور خودکار پنهان می شوند
autohide: false
.
prefers-reduced-motion
اثر انیمیشن این مؤلفه به پرسش رسانه
بستگی دارد
. بخش
حرکت کاهش یافته اسناد دسترسی ما را ببینید.
مثال ها
پایه ای
برای تشویق نان تست های قابل توسعه و قابل پیش بینی، ما یک هدر و بدنه را توصیه می کنیم. از سرصفحههای نان تست استفاده display: flex
میشود که به لطف ابزارهای حاشیه و فلکسباکس ما، امکان تراز آسان محتوا را فراهم میکند.
نان تست ها به همان اندازه که شما نیاز دارید انعطاف پذیر هستند و نشانه گذاری مورد نیاز بسیار کمی دارند. حداقل، ما به یک عنصر نیاز داریم که حاوی محتوای «برشتهشده» شما باشد و قویاً دکمه رد کردن را تشویق میکنیم.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
زنده
روی دکمه زیر کلیک کنید تا نان تست (که با ابزارهای ما در گوشه سمت راست پایین قرار دارد) که به طور پیش فرض با پنهان شده است را نشان دهید .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
نیمه شفاف
نان تست ها کمی شفاف هستند تا با آنچه در زیر آنها است ترکیب شوند.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
پشتهسازی
وقتی چندین نان تست دارید، به طور پیشفرض آنها را به صورت خوانا به صورت عمودی روی هم قرار میدهیم.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
تعیین سطح
در صورت نیاز، نان تست را با CSS سفارشی قرار دهید. بالا سمت راست اغلب برای اعلان ها استفاده می شود، همانطور که در وسط بالا نیز استفاده می شود. اگر میخواهید هر بار فقط یک نان تست را نشان دهید، سبکهای موقعیتیابی را درست روی آن قرار دهید .toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
برای سیستمهایی که اعلانهای بیشتری تولید میکنند، از یک عنصر بستهبندی استفاده کنید تا بتوانند به راحتی روی هم قرار بگیرند.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
همچنین می توانید با ابزارهای فلکس باکس برای تراز کردن نان تست ها به صورت افقی و/یا عمودی جذاب باشید.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
دسترسی
نان تستها بهعنوان وقفههای کوچک برای بازدیدکنندگان یا کاربران شما طراحی شدهاند، بنابراین برای کمک به کسانی که صفحهخوان و فناوریهای کمکی مشابه دارند، باید نان تستهای خود را در یک aria-live
منطقه بپیچید . تغییرات در مناطق زنده (مانند تزریق/بهروزرسانی مؤلفه نان تست) بهطور خودکار توسط صفحهخوانها اعلام میشود، بدون اینکه نیازی به جابجایی تمرکز کاربر یا ایجاد اختلال در کاربر باشد. علاوه بر این، aria-atomic="true"
برای اطمینان از اینکه کل نان تست همیشه بهعنوان یک واحد (اتمی) اعلام میشود، بجای اعلام آنچه تغییر کرده است (که اگر فقط بخشی از محتوای نان تست را بهروزرسانی کنید یا همان محتوای نان تست را نمایش میدهید، میتواند منجر به مشکلاتی شود). در زمان بعدی). اگر اطلاعات مورد نیاز برای فرآیند مهم است، به عنوان مثال برای لیستی از خطاها در یک فرم، سپس از مؤلفه هشدار استفاده کنید.به جای نان تست
توجه داشته باشید که قبل از تولید یا بهروزرسانی نان تست، منطقه زنده باید در نشانهگذاری وجود داشته باشد. اگر همزمان هر دو را به صورت پویا تولید کنید و به صفحه تزریق کنید، عموماً توسط فناوریهای کمکی اعلام نمیشوند.
همچنین باید سطح role
و aria-live
را بسته به محتوا تطبیق دهید. اگر پیام مهمی مانند خطا است، از role="alert" aria-live="assertive"
, در غیر این صورت از role="status" aria-live="polite"
ویژگی ها استفاده کنید.
با تغییر محتوایی که نمایش میدهید، حتماً delay
زمانبندی را بهروزرسانی کنید تا کاربران زمان کافی برای خواندن نان تست داشته باشند.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
هنگام استفاده از autohide: false
، باید یک دکمه بستن اضافه کنید تا به کاربران اجازه دهید نان تست را رد کنند.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
در حالی که از نظر فنی امکان افزودن کنترلهای قابل تمرکز/عملی (مانند دکمهها یا پیوندهای اضافی) به نان تست خود وجود دارد، باید از انجام این کار برای مخفی کردن خودکار نان تستها اجتناب کنید. حتی اگر delay
زمان طولانی به نان تست بدهید ، ممکن است برای کاربران صفحه کلید و فناوری کمکی دسترسی به نان تست برای انجام کاری دشوار باشد (زیرا نان تست ها هنگام نمایش فوکوس دریافت نمی کنند). اگر کاملاً باید کنترل های بیشتری داشته باشید، توصیه می کنیم از نان تست با autohide: false
.
رفتار جاوا اسکریپت
استفاده
تست های اولیه را از طریق جاوا اسکریپت آغاز کنید:
$('.toast').toast(option)
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
انیمیشن | بولی | درست است، واقعی | یک انتقال محو شدن CSS به نان تست اعمال کنید |
پنهان کردن خودکار | بولی | درست است، واقعی | مخفی کردن خودکار نان تست |
تاخیر انداختن | عدد | 500 |
تأخیر در پنهان کردن نان تست (ms) |
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
$().toast(options)
یک دسته نان تست را به مجموعه عناصر متصل می کند.
.toast('show')
نان تست یک عنصر را آشکار می کند. قبل از اینکه نان تست واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . shown.bs.toast
شما باید این روش را به صورت دستی فراخوانی کنید، در عوض نان تست شما نشان داده نمی شود.
$('#element').toast('show')
.toast('hide')
نان تست یک عنصر را پنهان می کند. قبل از اینکه نان تست واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . hidden.bs.toast
در صورتی که autohide
به false
.
$('#element').toast('hide')
.toast('dispose')
نان تست یک عنصر را پنهان می کند. نان تست شما در DOM باقی می ماند اما دیگر نشان داده نمی شود.
$('#element').toast('dispose')
مناسبت ها
نوع رویداد | شرح |
---|---|
نشان دادن.ب.نان تست | این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. |
نشان داده شده.ب.نان تست | این رویداد زمانی اجرا می شود که نان تست برای کاربر قابل مشاهده باشد. |
پنهان کردن.ب.نان تست | این رویداد بلافاصله پس از hide فراخوانی متد نمونه فعال می شود. |
پنهان.ب.نان تست | این رویداد زمانی اجرا می شود که نان تست از کاربر مخفی شود. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})