टोस्ट के लिये

एकटा टोस्ट, एकटा हल्का आ आसानी सं अनुकूलन योग्य अलर्ट संदेश कें साथ अपन आगंतुकक कें सूचनाक कें पुश करूं.

टोस्ट हल्का सूचना छै जे पुश सूचनाक कें नकल करय कें लेल डिजाइन कैल गेल छै जे मोबाइल आ डेस्कटॉप ऑपरेटिंग सिस्टम द्वारा लोकप्रिय कैल गेल छै. इ फ्लेक्सबॉक्स सं बनल छै, अइ कें लेल एकरा संरेखित करनाय आ ओकरा स्थिति मे रखनाय आसान छै.

अवलोकन

टोस्ट प्लगइन के उपयोग करय के समय जानय के बात:

• यदि अहाँ हमर जावास्क्रिप्ट स्रोत सँ बना रहल छी, त' एकरा आवश्यकताutil.js अछि .
• टोस्ट प्रदर्शन कारण सं ऑप्ट-इन होइत अछि, तें, अहांकें स्वयं एकरा इनिशियलाइज करय पड़त .
• जँ अहाँ निर्दिष्ट नहि करब तँ टोस्ट स्वतः नुका जायत autohide: false.

उदाहरण के लिये

मूलभूत

विस्तार योग्य आ पूर्वानुमानित टोस्ट कें प्रोत्साहित करय कें लेल, हम एकटा हेडर आ बॉडी कें सिफारिश करय छी. टोस्ट हेडर उपयोग 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>

पारभासी

टोस्ट सेहो कनेक पारभासी होइत अछि, तें जे किछु ऊपर देखबा मे आबि सकैत अछि, ओहि पर ब्लेंड भ' जाइत अछि. ब्राउज़र के लेल जे CSS गुण के समर्थन करैत backdrop-filterअछि, हम एकटा टोस्ट के नीचा तत्व के धुंधला करय के कोशिश सेहो करब.

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

ढेर करब

जखन अहां के पास कईटा टोस्ट अछि, हम डिफ़ॉल्ट रूप सं ओकरा पठनीय तरीका सं vertiaclly स्टैकिंग करय छी.

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

प्लेसमेंट

टोस्ट के जरूरत के हिसाब सं कस्टम सीएसएस के संग राखू. ऊपर दाहिना भाग प्रायः सूचनाक लेल प्रयोग कएल जाइत अछि , जेना ऊपरी बीचक । अगर अहां कहियो एक बेर में एकटा टोस्ट मात्र देखाबय जा रहल छी तं पोजीशनिंग स्टाइल के ठीक .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="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="".

विधियाँ

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

घटनाक्रम

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