टोस्ट करदा ऐ

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

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

अवलोकन करना

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

• जेकर तुस स्रोत थमां साढ़ी जावास्क्रिप्ट बना करदे ओ तां इसगी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…
})