Source

टोस्ट कइल जाला

टोस्ट, हल्का आ आसानी से अनुकूलन योग्य अलर्ट संदेश के साथ अपना विजिटर लोग के सूचना के धक्का दीं।

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

अवलोकन कइल जाव

टोस्ट प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:

  • अगर रउआ हमनी के जावास्क्रिप्ट स्रोत से बनावत बानी त एकरा खातिर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>

पारभासी होला

टोस्ट भी तनी पारभासी होला, एह से जवन भी ऊपर लउके ला ओकरा पर ई ब्लेंड हो जाला। 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>

ढेर हो रहल बा

जब रउरा लगे कई गो टोस्ट होखे त हमनी का डिफ़ॉल्ट रूप से ओह लोग के पठनीय तरीका से लंबवत ढेर कर देनी जा.

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

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

विधियन के बारे में बतावल गइल बा

एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा

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

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

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

घटनाक्रम के बारे में बतावल गइल बा

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