مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

ٹوسٹس

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

اس صفحہ پر

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

جائزہ

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

  • Toasts کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتے ہیں، اس لیے آپ کو خود ان کی ابتدا کرنی چاہیے ۔
  • اگر آپ وضاحت نہیں کرتے ہیں تو ٹوسٹ خود بخود چھپ جائیں گے autohide: false۔
prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

مثالیں

بنیادی

قابل توسیع اور متوقع ٹوسٹ کی حوصلہ افزائی کے لیے، ہم ایک ہیڈر اور باڈی تجویز کرتے ہیں۔ display: flexہمارے مارجن اور فلیکس باکس کی افادیت کی بدولت ٹوسٹ ہیڈر استعمال کرتے ہیں ، مواد کی آسانی سے سیدھ میں ہونے کی اجازت دیتے ہیں۔

ٹوسٹ آپ کی ضرورت کے مطابق لچکدار ہیں اور بہت کم مطلوبہ مارک اپ ہیں۔ کم از کم، ہمیں آپ کے "ٹوسٹڈ" مواد پر مشتمل ایک عنصر کی ضرورت ہے اور برخاست کرنے کے بٹن کی بھرپور حوصلہ افزائی کریں۔

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
.hideاس سے پہلے، ہماری اسکرپٹس نے ٹوسٹ کو مکمل طور پر چھپانے کے لیے کلاس کو متحرک طور پر شامل کیا تھا ( display:noneصرف کے ساتھ کے بجائے opacity:0)۔ اب اس کی ضرورت نہیں رہی۔ تاہم، پیچھے کی طرف مطابقت کے لیے، ہمارا اسکرپٹ کلاس کو ٹوگل کرتا رہے گا (حالانکہ اس کی کوئی عملی ضرورت نہیں ہے) اگلے بڑے ورژن تک۔

زندہ مثال

ٹوسٹ دکھانے کے لیے نیچے والے بٹن پر کلک کریں (نیچے دائیں کونے میں ہماری افادیت کے ساتھ موجود) جو ڈیفالٹ کے لحاظ سے چھپا ہوا ہے۔

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ہم اپنے لائیو ٹوسٹ ڈیمو کو متحرک کرنے کے لیے درج ذیل جاوا اسکرپٹ کا استعمال کرتے ہیں:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

پارباسی

ٹوسٹ ان کے نیچے کی چیزوں کے ساتھ گھل مل جانے کے لیے قدرے پارباسی ہوتے ہیں۔

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

اسٹیکنگ

آپ ٹوسٹ کو ٹوسٹ کنٹینر میں لپیٹ کر اسٹیک کر سکتے ہیں، جو عمودی طور پر کچھ وقفہ ڈالے گا۔

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

حسب ضرورت مواد

ذیلی اجزاء کو ہٹا کر، انہیں یوٹیلیٹیز کے ساتھ موافقت کرکے ، یا اپنا مارک اپ شامل کرکے اپنے ٹوسٹ کو حسب ضرورت بنائیں۔ یہاں ہم نے ڈیفالٹ کو ہٹا کر ، بوٹسٹریپ آئیکنز.toast-header سے اپنی مرضی کے مطابق چھپنے کا آئیکن شامل کرکے ، اور لے آؤٹ کو ایڈجسٹ کرنے کے لیے کچھ فلیکس باکس یوٹیلیٹیز استعمال کرکے ایک آسان ٹوسٹ بنایا ہے۔

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

متبادل طور پر، آپ ٹوسٹ میں اضافی کنٹرول اور اجزاء بھی شامل کر سکتے ہیں۔

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

رنگ سکیمیں

مندرجہ بالا مثال کی بنیاد پر، آپ ہمارے رنگ اور پس منظر کی افادیت کے ساتھ مختلف ٹوسٹ رنگ سکیمیں بنا سکتے ہیں۔ یہاں ہم نے شامل کیا .text-bg-primaryہے .toast، اور پھر .btn-close-whiteاپنے بند بٹن میں شامل کیا ہے۔ کرکرا کنارے کے لیے، ہم پہلے سے طے شدہ بارڈر کو ہٹا دیتے ہیں .border-0۔

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

جگہ کا تعین

حسب ضرورت CSS کے ساتھ ٹوسٹس رکھیں جیسا کہ آپ کو ان کی ضرورت ہے۔ اوپری دائیں کو اکثر اطلاعات کے لیے استعمال کیا جاتا ہے، جیسا کہ اوپر کا درمیانی حصہ ہے۔ اگر آپ ایک وقت میں صرف ایک ٹوسٹ دکھانے جا رہے ہیں، تو پوزیشننگ اسٹائل کو دائیں طرف رکھیں .toast۔

بوٹسٹریپ 11 منٹ پہلے
ہیلو، دنیا! یہ ایک ٹوسٹ پیغام ہے۔
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

ایسے سسٹمز کے لیے جو مزید اطلاعات پیدا کرتے ہیں، ریپنگ عنصر استعمال کرنے پر غور کریں تاکہ وہ آسانی سے اسٹیک کر سکیں۔

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

آپ ٹوسٹس کو افقی اور/یا عمودی طور پر سیدھ میں لانے کے لیے فلیکس باکس یوٹیلیٹیز کے ساتھ بھی فینسی حاصل کر سکتے ہیں۔

html 
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

استعمال کرتے وقت autohide: false، صارفین کو ٹوسٹ کو مسترد کرنے کی اجازت دینے کے لیے آپ کو ایک کلوز بٹن شامل کرنا چاہیے۔

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

اگرچہ تکنیکی طور پر آپ کے ٹوسٹ میں قابل توجہ/قابل عمل کنٹرولز (جیسے اضافی بٹن یا لنکس) شامل کرنا ممکن ہے، آپ کو ٹوسٹ کو خود سے چھپانے کے لیے ایسا کرنے سے گریز کرنا چاہیے۔ یہاں تک کہ اگر آپ ٹوسٹ کو لمبا delayٹائم آؤٹ دیتے ہیں تو ، کی بورڈ اور معاون ٹیکنالوجی کے صارفین کو کارروائی کرنے کے لیے وقت پر ٹوسٹ تک پہنچنا مشکل ہو سکتا ہے (چونکہ ٹوسٹ کے ڈسپلے ہونے پر انہیں فوکس نہیں ملتا ہے)۔ اگر آپ کے پاس مزید کنٹرول ہونا ضروری ہے، تو ہم تجویز کرتے ہیں کہ ٹوسٹ کے ساتھ استعمال کریں autohide: false۔

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے ایک حصے کے طور پر، ٹوسٹس اب مقامی CSS متغیرات .toastکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتے ہیں۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass متغیرات

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

استعمال

جاوا اسکرپٹ کے ذریعے ٹوسٹ شروع کریں:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

محرکات

برخاستگی ٹوسٹ کے اندرdata بٹن پر موجود وصف کے ساتھ حاصل کی جا سکتی ہے جیسا کہ ذیل میں دکھایا گیا ہے۔

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

یا ٹوسٹ کے باہر بٹن پر data-bs-targetجیسا کہ ذیل میں دکھایا گیا ہے:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 5.2.0 کے مطابق، تمام اجزاء ایک تجرباتی محفوظ ڈیٹا وصف کو سپورٹ کرتے data-bs-configہیں جو JSON سٹرنگ کے طور پر سادہ اجزاء کی ترتیب کو رکھ سکتا ہے۔ جب ایک عنصر data-bs-config='{"delay":0, "title":123}'اور data-bs-title="456"صفات ہوں گے تو حتمی titleقدر ہوگی 456اور علیحدہ ڈیٹا انتسابات پر دی گئی قدروں کو اوور رائڈ کریں گے data-bs-config۔ اس کے علاوہ، موجودہ ڈیٹا کے اوصاف JSON کی قدریں رکھنے کے قابل ہیں جیسے data-bs-delay='{"show":0,"hide":150}'۔

نام قسم طے شدہ تفصیل
animation بولین true ٹوسٹ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
autohide بولین true تاخیر کے بعد ٹوسٹ کو خود بخود چھپائیں۔
delay نمبر 5000 ٹوسٹ کو چھپانے سے پہلے ملی سیکنڈ میں تاخیر کریں۔

طریقے

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

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

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

طریقہ تفصیل
dispose ایک عنصر کے ٹوسٹ کو چھپاتا ہے۔ آپ کا ٹوسٹ DOM پر رہے گا لیکن اب نہیں دکھایا جائے گا۔
getInstance جامد طریقہ جو آپ کو DOM عنصر سے وابستہ ٹوسٹ مثال حاصل کرنے کی اجازت دیتا ہے۔
مثال کے طور پر: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)بوٹسٹریپ ٹوسٹ مثال لوٹاتا ہے۔
getOrCreateInstance جامد طریقہ جو آپ کو DOM عنصر کے ساتھ منسلک ٹوسٹ مثال حاصل کرنے، یا ایک نیا بنانے کی اجازت دیتا ہے، اگر یہ شروع نہیں کیا گیا تھا۔
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)بوٹسٹریپ ٹوسٹ مثال لوٹاتا ہے۔
hide ایک عنصر کے ٹوسٹ کو چھپاتا ہے۔ ٹوسٹ کے حقیقت میں چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.toastواقعہ ہونے سے پہلے)۔ اگر آپ نے یہ طریقہ بنایا ہے تو آپ کو دستی طور پر کال autohideکرنا falseہوگی۔
isShown ٹوسٹ کی مرئی حالت کے مطابق بولین لوٹاتا ہے۔
show ایک عنصر کے ٹوسٹ کو ظاہر کرتا ہے۔ ٹوسٹ کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.toastواقعہ پیش آنے سے پہلے)۔ آپ کو اس طریقہ کو دستی طور پر کال کرنا ہوگا، اس کے بجائے آپ کا ٹوسٹ نہیں دکھائے گا۔

تقریبات

تقریب تفصیل
hide.bs.toast اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideمثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.toast یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ٹوسٹ صارف سے چھپ جانا ختم کر دیتا ہے۔
show.bs.toast یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب showمثال کا طریقہ کہا جاتا ہے۔
shown.bs.toast یہ ایونٹ اس وقت شروع ہوتا ہے جب ٹوسٹ کو صارف کے لیے مرئی بنایا جاتا ہے۔ 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})