Source

نانی بەیانی

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

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

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

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

  • ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بە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>

نیمچە ڕووناک

تۆستەکانیش کەمێک نیمچە ڕووناکن، بۆیە لەسەر هەر شتێک کە ڕەنگە لەسەری دەرکەون تێکەڵ دەبن. بۆ ئەو وێبگەڕانەی کە پشتگیری لە backdrop-filterتایبەتمەندی CSS دەکەن، هەروەها هەوڵ دەدەین توخمەکان لە ژێر تۆستێکدا کاڵ بکەینەوە.

<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="min-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>

هەڵسوکەوتی جاڤاسکڕێپت

بەکارهێنان

دەستپێکردنی نانی بەیانی لە ڕێگەی جاڤاسکڕێپتەوە:

$('.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...
})