in English

ٽوسٽ

پش نوٽيفڪيشن توهان جي سياحن کي ٽوسٽ سان، هڪ ہلڪو وزن ۽ آساني سان حسب ضرورت خبرداري پيغام سان.

Toasts ہلڪي وزن وارا اطلاع آھن جيڪي پش نوٽيفڪيشن کي نقل ڪرڻ لاءِ ٺاھيا ويا آھن جيڪي موبائل ۽ ڊيسڪ ٽاپ آپريٽنگ سسٽم پاران مشهور ڪيا ويا آھن. اهي flexbox سان ٺهيل آهن، تنهنڪري اهي ترتيب ڏيڻ ۽ پوزيشن ۾ آسان آهن.

اوسر

ٽوسٽ پلگ ان استعمال ڪرڻ وقت ڄاڻڻ جون شيون:

  • جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهيutil.js .
  • Toasts آپٽ ان ڪارڪردگي سببن لاءِ آھن، تنھنڪري توھان کي انھن کي پاڻ شروع ڪرڻ گھرجي .
  • مهرباني ڪري نوٽ ڪريو ته توهان پوزيشننگ ٽوسٽ جا ذميوار آهيو.
  • ٽوسٽ پاڻمرادو لڪائي ڇڏيندو جيڪڏھن توھان وضاحت نه ڪندا autohide: false.

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

مثال

بنيادي

توسيع ۽ پيش گوئي واري ٽوسٽ جي حوصلا افزائي ڪرڻ لاءِ، اسان سفارش ڪريون ٿا هيڊر ۽ جسم. ٽوسٽ هيڊر استعمال ڪن ٿا display: flex، اسان جي مارجن ۽ فليڪس باڪس يوٽيلٽيز جي مهرباني مواد جي آسان ترتيب ڏيڻ جي اجازت ڏئي ٿي.

Toasts لچڪدار آهن جيئن توهان جي ضرورت آهي ۽ تمام گهٽ گهربل مارڪ اپ آهي. گھٽ ۾ گھٽ، اسان کي ھڪڙي عنصر جي ضرورت آھي توھان جي "ٽوسٽ ٿيل" مواد تي مشتمل آھي ۽ ھڪڙي برطرفي واري بٽڻ کي مضبوطيء سان حوصلا افزائي ڪريون.

<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-filterCSS ملڪيت کي سپورٽ ڪن ٿا، اسان به ڪوشش ڪنداسين ته عناصرن کي ٽوسٽ جي ھيٺان بلور ڪرڻ جي.

<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 افاديت سان ٽوسٽ کي افقي ۽ / يا عمودي طور تي ترتيب ڏيڻ لاءِ.

<!-- 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>

پهچ

Toasts جو مقصد توھان جي سياحن يا استعمال ڪندڙن لاءِ ننڍڙيون رڪاوٽون آھن، تنھنڪري انھن جي مدد ڪرڻ لاءِ جن کي اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون آھن، توھان کي پنھنجي ٽوسٽ کي ھڪڙي 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>

JavaScript رويي

استعمال

جاوا اسڪرپٽ ذريعي ٽوسٽ شروع ڪريو:

$('.toast').toast(option)

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-animation="".

نالو قسم ڊفالٽ وصف
انيميشن بولين سچو ٽوسٽ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
خودڪار لڪائڻ بولين سچو خودڪار ٽوسٽ لڪايو
دير ڪرڻ نمبر 500 ٽوسٽ کي لڪائڻ ۾ دير ڪريو (ايم ايس)

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

$().toast(options)

هڪ ٽوسٽ هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍيندو آهي.

.toast('show')

هڪ عنصر جي ٽوسٽ کي ظاهر ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ٽوسٽ اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.toastواقعي ٿيڻ کان اڳ). توھان کي دستي طور ھن طريقي کي سڏڻو پوندو، ان جي بدران توھان جو ٽوسٽ نه ڏيکاريندو.

$('#element').toast('show')

.toast('hide')

هڪ عنصر جي ٽوسٽ کي لڪائيندو آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽوسٽ اصل ۾ لڪايو ويو آهي (يعني hidden.bs.toastواقعي ٿيڻ کان اڳ). توهان کي دستي طور تي هن طريقي کي ڪال ڪرڻو پوندو جيڪڏهن توهان autohideڪيو آهي false.

$('#element').toast('hide')

.toast('dispose')

هڪ عنصر جي ٽوسٽ کي لڪائيندو آهي. توھان جو ٽوسٽ ڊوم تي رھندو پر وڌيڪ نه ڏيکاريندو.

$('#element').toast('dispose')

واقعا

واقعي جو قسم وصف
show.bs.toast اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.toast اهو واقعو فائر ڪيو ويو آهي جڏهن ٽوسٽ استعمال ڪندڙ کي ظاهر ڪيو ويو آهي.
hide.bs.toast اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.toast اهو واقعو فائر ڪيو ويو آهي جڏهن ٽوسٽ ختم ٿي چڪو آهي صارف کان لڪايو وڃي. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})