ٹوسٹس

ٹوسٹ، ہلکا پھلکا اور آسانی سے حسب ضرورت انتباہی پیغام کے ساتھ اپنے زائرین کے لیے اطلاعات کو پش کریں۔

ٹوسٹ ہلکے وزن کی اطلاعات ہیں جو موبائل اور ڈیسک ٹاپ آپریٹنگ سسٹمز کے ذریعے مقبول ہونے والی پش اطلاعات کی نقل کرنے کے لیے بنائی گئی ہیں۔ وہ flexbox کے ساتھ بنائے گئے ہیں، اس لیے ان کی سیدھ اور پوزیشن میں آسانی ہے۔

جائزہ

ٹوسٹ پلگ ان کا استعمال کرتے وقت جاننے کی چیزیں:

اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js ۔
Toasts کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتے ہیں، اس لیے آپ کو خود ان کی ابتدا کرنی چاہیے ۔
براہ کرم نوٹ کریں کہ آپ ٹوسٹ کی پوزیشننگ کے ذمہ دار ہیں۔
اگر آپ وضاحت نہیں کرتے ہیں تو ٹوسٹ خود بخود چھپ جائیں گے 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۔

ہیلو، دنیا! یہ ایک ٹوسٹ پیغام ہے۔

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

نام	قسم	طے شدہ	تفصیل
حرکت پذیری	بولین	سچ ہے	ٹوسٹ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
خود بخود چھپ جانا	بولین	سچ ہے	ٹوسٹ کو آٹو چھپائیں۔
تاخیر	نمبر	`500`	ٹوسٹ کو چھپانے میں تاخیر (ایم ایس)

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام 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`مثال کا طریقہ کہا جاتا ہے۔
دکھایا گیا بی ایس ٹوسٹ	یہ ایونٹ اس وقت شروع ہوتا ہے جب ٹوسٹ کو صارف کے لیے مرئی بنایا جاتا ہے۔
hide.bs.toast	اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب `hide`مثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.toast	یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ٹوسٹ صارف سے چھپ جانا ختم کر دیتا ہے۔

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})