Source

टोस्ट करतात

टोस्ट, हलको आनी सहजपणान अनुकूल करपाक येवपी इशारो संदेशा वरवीं तुमच्या भेट दिवप्यांक अधिसुचोवण्यो धुकळचीं.

मोबायल आनी डेस्कटॉप ऑपरेटिंग सिस्टमांनी लोकप्रिय केल्ल्या पुश अधिसुचोवण्यांची नक्कल करपा खातीर तयार केल्लीं हलकीं अधिसुचोवण्यो टोस्ट आसात. ते फ्लेक्सबॉक्सान तयार केल्यात, देखून तांकां संरेखित करप आनी स्थिती करप सोंपें आसा.

नियाळ

टोस्ट प्लगइन वापरतना कळपाच्यो गजाली:

  • तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जायutil.js .
  • टोस्ट कार्यक्षमताय कारणांक लागून ऑप्ट-इन आसात, देखून तुमी स्वता तांकां आरंभ करपाक जाय .
  • उपकार करून लक्षांत दवरात की टोस्टांची स्थिती तुमची जापसालदारकी आसा.
  • तुमी स्पश्ट करूंक ना जाल्यार टोस्ट आपोआप लिपतले autohide: false.

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

उदाहरणां

मुळावें

विस्तारपाक येवपी आनी अदमासाक येवपी टोस्टांक प्रोत्साहन दिवपाक, आमी हेडर आनी बॉडी शिफारस करतात. Toast headers use display: flex, आमच्या मार्जिन आनी flexbox उपयुक्ततायांक लागून सामुग्री सोपी संरेखणाक परवानगी दिता.

टोस्ट तुमकां जाय तितले लवचीक आसतात आनी तातूंत गरजेचें मार्कअप सामकें उणें आसता. उण्यांत उणें, तुमची “टोस्टेड” सामुग्री आसपावपाक आमकां एकूच घटक जाय पडटा आनी डिसमिस बटणाक खरपणान प्रोत्साहन दितात.

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

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

तुमकां जाय तशीं सानुकूल CSS कडेन टोस्ट दवरात. वयलो उजवो भाग चड करून अधिसुचोवण्यां खातीर वापरतात, तशेंच वयलो मदलो भाग. तुमी केन्नाच एका वेळार फकत एक टोस्ट दाखोवपाचे आसल्यार, पोझिशनिंग स्टाइल्स बरोबर घालात .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 उपयुक्तताय कडेन फॅन्सी मेळोवंक शकतात.

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

नांव प्रकार डिफॉल्ट वर्णन
एनिमेशन करप बूलियन हें नांव खरें टोस्टाचेर CSS फेड संक्रमण लागू करात
ऑटोहिड करप बूलियन हें नांव खरें ऑटो टोस्ट लिपोवप
कळाव आंकडो 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...
})