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

नाम टाइप चूक विवरण
एनीमेशन बूलियन सच टोस्ट में CSS फेड ट्रांजिशन लागू करें
स्वतः छिपना बूलियन सच टोस्ट को ऑटो छुपाएं
देरी संख्या 500 टोस्ट छिपाने में देरी (एमएस)

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहलेइसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें

$().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 यह घटना तब सक्रिय होती है जब उपयोगकर्ता को टोस्ट दिखाई देता है।
छिपाना.bs.toast hideइंस्टें�� विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.bs.toast जब टोस्ट उपयोगकर्ता से छिपाया जा रहा है तो यह घटना निकाल दी जाती है।
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})