in English

टोस्ट करदा ऐ

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

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

अवलोकन करना

टोस्ट प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:

  • जेकर तुस स्रोत थमां साढ़ी जावास्क्रिप्ट बना करदे ओ तां इसगीutil.js .
  • टोस्ट प्रदर्शन कारणें कन्नै ऑप्ट-इन होंदे न , इसलेई तुसेंगी अपने आपै गी शुरू करना होग .
  • कृपया ध्यान देओ जे टोस्टें गी पोजीशन देने दी जिम्मेदारी तुंदा ऐ।
  • जेकर तुस निर्दिश्ट नेईं करदे ओ तां टोस्ट अपने आप गै छुप जाङन 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>

प्लेसमेंट करना

कस्टम सीएसएस कन्नै टोस्टें गी जरूरत मताबक रक्खो। शीर्शक दाएं दा इस्तेमाल अक्सर सूचनाएं आस्तै कीता जंदा ऐ, जि’यां शीर्शक बिच्च दा। अगर तुस कदें बी इक बारी च इक टोस्ट गी गै दस्सने आह्ले ओ, तां पोजीशनिंग शैलियां गी ठीक .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 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)

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-animation="".

नां किसम डिफाल्ट ब्यौरा
एनीमेशन दा बूलियन सच्च टोस्ट च इक सीएसएस फीड संक्रमण लागू करो
ऑटोहाइड करना बूलियन सच्च ऑटो टोस्ट छुपा दे
चिर नंबर 500 टोस्ट छुपाने च देरी करो (ms)

विधियां

एसिंक्रोनस तरीके ते संक्रमण

सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .

होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .

$().toast(options)

इक तत्व संग्रह कन्नै इक टोस्ट हैंडलर संलग्न करदा ऐ।

.toast('show')

इक तत्व दा टोस्ट उजागर करदा ऐ। टोस्ट गी असल च दस्से जाने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ । shown.bs.toastतुसेंगी इस तरीके गी मैन्युअल रूप कन्नै बुलाना होग, इसदे बजाय तुंदा टोस्ट नेईं दस्सग।

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

.toast('hide')

इक तत्व दा टोस्ट छिपांदा ऐ। टोस्ट गी असल च छिपाने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ । hidden.bs.toastतुसें गी इस विधि गी मैन्युअल रूप कन्नै बुलाना होग जेकर तुसें गी बनाया autohidefalse.

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

.toast('dispose')

इक तत्व दा टोस्ट छिपांदा ऐ। तुंदा टोस्ट डीओएम पर गै रौह्ग पर हून नेईं दस्सग।

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

घटनाएं

घटना दा प्रकार ब्यौरा
दिखाओ।बीएस।टोस्ट showइंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ।
दिखाया।बी���स.टोस्ट एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी गी दिक्खने च मदद दित्ती जंदी ऐ।
छिपाओ।बीएस।टोस्ट इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hideइंस्टेंस विधि गी बुलाया गेआ ऐ.
छिपे दा।बी.एस.टोस्ट एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी थमां छिपाना समाप्त होई जंदा ऐ।
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})