نانی بەیانی
پاڵ بە ئاگادارکردنەوەکانەوە بنێ بۆ سەردانکەرەکانت بە نانی بەیانی، پەیامێکی ئاگادارکردنەوە کە کێشی سووک و بە ئاسانی دەتوانرێت خۆکارانە دابنرێت.
تۆستەکان ئاگادارکردنەوەیەکی سووکە کە بۆ تقلیدکردنی ئاگادارکردنەوەکانی پاڵنەر دروستکراون کە لەلایەن سیستەمی کارپێکردنی مۆبایل و مێزەوە بەناوبانگ بوون. بە فلیکس بۆکس دروستکراون، بۆیە ڕێکخستن و جێگیرکردنیان ئاسانە.
تێڕوانینێکی گشتی
ئەو شتانەی کە پێویستە بزانیت لەکاتی بەکارهێنانی پێوەکراوەکەی تۆست:
- ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بە
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=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەی کاڵبوونەوەی CSS بۆ تۆستەکە بەکاربهێنە |
شاردنەوەی خۆكردانە | boolean | ڕاست | ئۆتۆماتیکی نانی بەیانی بشارەوە |
دواخستن | ژماره | 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.bs.toast | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە.bs.toast | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە تۆستەکە بۆ بەکارهێنەر دیار بێت. |
شاردنەوەی.bs.toast | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
شاراوە.bs.toast | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە تۆستەکە تەواو بوو لە شاردنەوەی لە بەکارهێنەر. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})