نان تست
با یک نان تست، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، اعلانها را به بازدیدکنندگان خود ارسال کنید.
نان تست ها اعلان های سبک وزنی هستند که برای تقلید از اعلان های فشاری که توسط سیستم عامل های موبایل و دسکتاپ رایج شده اند طراحی شده اند. آنها با فلکس باکس ساخته شده اند، بنابراین به راحتی قابل تراز و قرار دادن هستند.
بررسی اجمالی
نکاتی که هنگام استفاده از پلاگین نان تست باید بدانید:
- نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
- اگر نان تست را مشخص نکنید به طور خودکار پنهان می شوند
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 me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
.hide
کلاس را اضافه میکردند تا یک نان تست را کاملاً مخفی کند (با
display:none
، نه فقط با
opacity:0
). این در حال حاضر دیگر ضروری نیست. با این حال، برای سازگاری به عقب، اسکریپت ما تا نسخه اصلی بعدی به تغییر کلاس (حتی اگر نیازی عملی به آن وجود ندارد) ادامه خواهد داد.
مثال زنده
روی دکمه زیر کلیک کنید تا یک نان تست (که با ابزارهای ما در گوشه سمت راست پایین قرار دارد) که به طور پیش فرض پنهان شده است را نشان دهید.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
ما از جاوا اسکریپت زیر برای راه اندازی دمو نان تست زنده خود استفاده می کنیم:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
نیمه شفاف
نان تست ها کمی شفاف هستند تا با آنچه در زیر آنها است ترکیب شوند.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
پشتهسازی
میتوانید نان تستها را با پیچاندن آنها در ظرف نان تست روی هم بچینید، که به صورت عمودی مقداری فاصله ایجاد میکند.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
محتوای دلخواه
نان تست های خود را با حذف اجزای فرعی، بهینه سازی آنها با ابزارهای کمکی ، یا با افزودن نشانه گذاری خود، سفارشی کنید. .toast-header
در اینجا با حذف پیشفرض ، افزودن یک نماد مخفی سفارشی از Bootstrap Icons و استفاده از برخی ابزارهای فلکسباکس برای تنظیم طرح ، یک نان تست سادهتر ایجاد کردهایم .
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
همچنین، میتوانید کنترلها و اجزای اضافی را به نان تست اضافه کنید.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
طرح های رنگی
با تکیه بر مثال بالا، می توانید طرح های رنگی مختلف نان تست را با ابزارهای رنگ و پس زمینه ما ایجاد کنید. در اینجا ما .bg-primary
و .text-white
به را اضافه کرده ایم .toast
و سپس .btn-close-white
به دکمه بستن خود اضافه کرده ایم. برای یک لبه واضح، حاشیه پیش فرض را با .border-0
.
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
تعیین سطح
در صورت نیاز، نان تست را با CSS سفارشی قرار دهید. بالا سمت راست اغلب برای اعلان ها استفاده می شود، همانطور که در وسط بالا نیز استفاده می شود. اگر میخواهید هر بار فقط یک نان تست را نشان دهید، سبکهای موقعیتیابی را درست روی آن قرار دهید .toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
برای سیستمهایی که اعلانهای بیشتری تولید میکنند، از یک عنصر بستهبندی استفاده کنید تا بتوانند به راحتی روی هم قرار بگیرند.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
در حالی که از نظر فنی امکان افزودن کنترلهای قابل تمرکز/عملی (مانند دکمهها یا پیوندهای اضافی) به نان تست خود وجود دارد، باید از انجام این کار برای مخفی کردن خودکار نان تستها اجتناب کنید. حتی اگر delay
زمان طولانی به نان تست بدهید ، ممکن است برای کاربران صفحه کلید و فناوری کمکی دسترسی به نان تست برای انجام کاری دشوار باشد (زیرا نان تست ها هنگام نمایش فوکوس دریافت نمی کنند). اگر کاملاً باید کنترل های بیشتری داشته باشید، توصیه می کنیم از نان تست با autohide: false
.
ساس
متغیرها
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba($black, .05);
استفاده
تست های اولیه را از طریق جاوا اسکریپت آغاز کنید:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
محرک ها
اخراج را می توان با data
ویژگی روی دکمه ای در داخل نان تست به دست آورد که در زیر نشان داده شده است:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
یا روی دکمه ای خارج از نان تست با استفاده از موارد data-bs-target
زیر نشان داده شده است:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-animation=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
animation |
بولی | true |
یک انتقال محو شدن CSS به نان تست اعمال کنید |
autohide |
بولی | true |
مخفی کردن خودکار نان تست |
delay |
عدد | 5000 |
تأخیر در پنهان کردن نان تست (ms) |
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
نشان می دهد
نان تست یک عنصر را آشکار می کند. قبل از اینکه نان تست واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . shown.bs.toast
شما باید این روش را به صورت دستی فراخوانی کنید، در عوض نان تست شما نشان داده نمی شود.
toast.show()
پنهان شدن
نان تست یک عنصر را پنهان می کند. قبل از اینکه نان تست واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . hidden.bs.toast
در صورتی که autohide
به false
.
toast.hide()
در معرض قرار دادن
نان تست یک عنصر را پنهان می کند. نان تست شما در DOM باقی می ماند اما دیگر نشان داده نمی شود.
toast.dispose()
getInstance
روش ایستا که به شما امکان می دهد نمونه تست مرتبط با یک عنصر DOM را دریافت کنید
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
روش ایستا که به شما امکان می دهد نمونه نان تست مرتبط با یک عنصر DOM را دریافت کنید یا در صورتی که اولیه نشده بود نمونه جدیدی ایجاد کنید.
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
مناسبت ها
نوع رویداد | شرح |
---|---|
show.bs.toast |
این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. |
shown.bs.toast |
این رویداد زمانی اجرا می شود که نان تست برای کاربر قابل مشاهده باشد. |
hide.bs.toast |
این رویداد بلافاصله پس از hide فراخوانی متد نمونه فعال می شود. |
hidden.bs.toast |
این رویداد زمانی اجرا می شود که نان تست از کاربر مخفی شود. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})