टोस्ट करदा ऐ
अपने आगंतुकें गी इक टोस्ट, इक हल्के ते आसानी कन्नै अनुकूलन योग्य अलर्ट संदेश कन्नै सूचनाएं गी पुश करो।
टोस्ट हल्के वजन आह् ली सूचनाएं न जेह् ड़ियां पुश सूचनाएं दी नकल करने आस्तै डिजाइन कीतियां गेदियां न जेह् ड़ियां मोबाइल ते डेस्कटॉप ऑपरेटिंग सिस्टमें आसेआ लोकप्रिय कीतियां गेदियां न। इन्हें फ्लेक्सबॉक्स कन्नै बनाया गेदा ऐ, इसलेई इन्हें गी संरेखित करना ते स्थिति च रखना आसान ऐ।
अवलोकन करना
टोस्ट प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:
- जेकर तुस स्रोत थमां साढ़ी जावास्क्रिप्ट बना करदे ओ तां इसगी
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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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
तुसें गी इस विधि गी मैन्युअल रूप कन्नै बुलाना होग जेकर तुसें गी बनाया autohide
ऐ false
.
$('#element').toast('hide')
.toast('dispose')
इक तत्व दा टोस्ट छिपांदा ऐ। तुंदा टोस्ट डीओएम पर गै रौह्ग पर हून नेईं दस्सग।
$('#element').toast('dispose')
घटनाएं
घटना दा प्रकार | ब्यौरा |
---|---|
दिखाओ।बीएस।टोस्ट | show इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बी���स.टोस्ट | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी गी दिक्खने च मदद दित्ती जंदी ऐ। |
छिपाओ।बीएस।टोस्ट | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपे दा।बी.एस.टोस्ट | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी थमां छिपाना समाप्त होई जंदा ऐ। |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})