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

ٹوسٹس

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

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

جائزہ

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

  • 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 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۔

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

پارباسی

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

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

اسٹیکنگ

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

<div class="toast-container">
  <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 سے اپنی مرضی کے مطابق چھپنے کا آئیکن شامل کرکے ، اور لے آؤٹ کو ایڈجسٹ کرنے کے لیے کچھ فلیکس باکس یوٹیلیٹیز استعمال کرکے ایک آسان ٹوسٹ بنایا ہے۔

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

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

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

رنگ سکیمیں

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

<div class="toast align-items-center text-white 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 منٹ پہلے
ہیلو، دنیا! یہ ایک ٹوسٹ پیغام ہے۔
<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 position-absolute 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>

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

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

<!-- 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، آپ کو ایک کلوز بٹن شامل کرنا چاہیے تاکہ صارفین ٹوسٹ کو مسترد کر سکیں۔

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

سس

متغیرات

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

استعمال

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

اختیارات

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

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

طریقے

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

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

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

دکھائیں

ایک عنصر کے ٹوسٹ کو ظاہر کرتا ہے۔ ٹوسٹ کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.toastواقعہ پیش آنے سے پہلے)۔ آپ کو اس طریقہ کو دستی طور پر کال کرنا ہوگا، اس کے بجائے آپ کا ٹوسٹ نہیں دکھائے گا۔

toast.show()

چھپائیں

ایک عنصر کے ٹوسٹ کو چھپاتا ہے۔ ٹوسٹ کے حقیقت میں چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.toastواقعہ ہونے سے پہلے)۔ اگر آپ نے یہ طریقہ بنایا ہے تو آپ کو دستی طور پر کال autohideکرنا falseہوگی۔

toast.hide()

تصرف

ایک عنصر کے ٹوسٹ کو چھپاتا ہے۔ آپ کا ٹوسٹ DOM پر رہے گا لیکن اب نہیں دکھایا جائے گا۔

toast.dispose()

getInstance

جامد طریقہ جو آپ کو ایک DOM عنصر کے ساتھ منسلک scrollspy مثال حاصل کرنے کی اجازت دیتا ہے۔

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

جامد طریقہ جو آپ کو ایک DOM عنصر کے ساتھ منسلک scrollspy مثال حاصل کرنے کی اجازت دیتا ہے، یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا تخلیق کر سکتا ہے۔

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

تقریبات

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