in English

نانی بەیانی

پاڵ بە ئاگادارکردنەوەکانەوە بنێ بۆ سەردانکەرەکانت بە نانی بەیانی، پەیامێکی ئاگادارکردنەوە کە کێشی سووک و بە ئاسانی دەتوانرێت خۆکارانە دابنرێت.

تۆستەکان ئاگادارکردنەوەیەکی سووکە کە بۆ تقلیدکردنی ئاگادارکردنەوەکانی پاڵنەر دروستکراون کە لەلایەن سیستەمی کارپێکردنی مۆبایل و مێزەوە بەناوبانگ بوون. بە فلیکس بۆکس دروستکراون، بۆیە ڕێکخستن و جێگیرکردنیان ئاسانە.

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لەکاتی بەکارهێنانی پێوەکراوەکەی تۆست:

  • ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بە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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

جێگیرکردن

تۆستەکان بە CSS تایبەتمەند دابنێ بەپێی پێویستت. زۆرجار لای ڕاستی سەرەوە بۆ ئاگادارکردنەوە بەکاردێت، هەروەها ناوەڕاستی سەرەوە. ئەگەر هەرگیز بڕیارە لە یەک کاتدا یەک تۆست پیشان بدەیت، شێوازەکانی جێگیرکردن ڕاست لەسەر .toast.

بووتستراپ 11 خولەک پێش ئێستا
سڵاو جیهان! ئەمە پەیامێکی تۆستە.
<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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...
})