टोस्ट करदा ऐ
अपने आगंतुकें गी इक टोस्ट, इक हल्के ते आसानी कन्नै अनुकूलन योग्य अलर्ट संदेश कन्नै सूचनाएं गी पुश करो।
टोस्ट हल्के वजन आह् ली सूचनाएं न जेह् ड़ियां पुश सूचनाएं दी नकल करने लेई डिजाइन कीतियां गेदियां न जेह् ड़ियां मोबाइल ते डेस्कटॉप ऑपरेटिंग सिस्टमें आसेआ लोकप्रिय कीतियां गेदियां न। एह् फ्लेक्सबॉक्स कन्नै बने दे न, इसलेई उनेंगी संरेखित करना ते स्थिति च रखना आसान ऐ।
अवलोकन करना
टोस्ट प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:
- जेकर तुस स्रोत थमां साढ़ी जावास्क्रिप्ट बना करदे ओ तां इसगी
util.js
. - टोस्ट प्रदर्शन कारणें कन्नै ऑप्ट-इन होंदे न , इसलेई तुसेंगी अपने आपै गी शुरू करना होग .
- कृपया ध्यान देओ जे टोस्टें गी पोजीशन देने दी जिम्मेदारी तुंदा ऐ।
- जेकर तुस निर्दिश्ट नेईं करदे ओ तां टोस्ट अपने आप गै छुप जाङन
autohide: false
.
इस घटक दा एनीमेशन प्रभाव prefers-reduced-motion
मीडिया क्वेरी पर निर्भर करदा ऐ। साढ़े सुलभता दस्तावेजें दा घट्ट कीती गेदी गति खंड दिक्खो .
उदाहरण दे
बुनियादी
विस्तार योग्य ते पूर्वानुमानित टोस्टें गी प्रोत्साहित करने आस्तै, अस इक हेडर ते शरीर दी सलाह दिंदे न। टोस्ट हेडर दा उपयोग display: flex
, साढ़े मार्जिन ते फ्लेक्सबॉक्स उपयोगिताएं दी बदौलत सामग्री दे आसान संरेखण दी अनुमति दिंदा ऐ।
टोस्ट उतने लचीले होंदे न जितना तुसेंगी जरूरत ऐ ते इस च जरूरी मार्कअप बड़ा घट्ट होंदा ऐ। घट्टोघट्ट, असेंगी तुंदी "टोस्टेड" सामग्री गी शामल करने आस्तै इक तत्व दी लोड़ ऐ ते इक खारिज बटन गी सख्ती कन्नै प्रोत्साहित करना ऐ।
पारभासी
टोस्ट बी थोड़ा पारभासी होंदे न, इस करी एह् जेह्ड़ा बी उप्पर दिक्खने गी मिलदा ऐ उसदे उप्पर ब्लेंड होंदे न। CSS प्रॉपर्टी गी समर्थन करने आह् ले ब्राउज़रें आस्तै backdrop-filter
, अस इक टोस्ट दे हेठ तत्वें गी धुंधला करने दी बी कोशश करगे।
ढेर करना
जदूं तुंदे कोल मते सारे टोस्ट होंदे न तां अस डिफ़ॉल्ट रूप कन्नै उनेंगी पठनीय तरीके कन्नै लंबवत ढेर करने आं।
प्लेसमेंट करना
कस्टम सीएसएस कन्नै टोस्टें गी जरूरत मताबक रक्खो। शीर्शक दाएं दा इस्तेमाल अक्सर सूचनाएं आस्तै कीता जंदा ऐ, जि’यां शीर्शक बिच्च दा। अगर तुस कदें बी इक बारी च इक टोस्ट गी गै दस्सने आह्ले ओ, तां पोजीशनिंग शैलियां गी ठीक .toast
.
सिस्टमें आस्तै जेह् ड़े होर सूचनाएं गी पैदा करदे न , इक लपेटने आह् ले तत्व दा उपयोग करने पर विचार करो तां जे ओह् आसानी कन्नै ढेर करी सकन ।
तुस टोस्टें गी क्षैतिज ते/जां लंबवत संरेखित करने आस्तै फ्लेक्सबॉक्स उपयोगिताएं कन्नै बी फैंसी पाई सकदे ओ।
सुलभता दा
टोस्ट दा मकसद तुंदे आगंतुकें जां बरतूनकर्ताएं आस्तै निक्के-निक्के रूकावट होने दा ऐ , इसलेई स्क्रीन रीडर ते इसी जनेही सहायक तकनीकें आह् ले लोकें दी मदद करने आस्तै , तुसेंगी अपने टोस्टें गी इक aria-live
क्षेत्र च लपेटना चाहिदा ऐ . लाइव क्षेत्रें च बदलाव (जि’यां टोस्ट घटक गी इंजेक्ट करना/अपडेट करना) स्क्रीन रीडरें आसेआ स्वचालित रूप कन्नै घोशित कीता जंदा ऐ, जिस च बरतूनी दे फोकस गी हिलाने दी लोड़ नेईं होंदी जां कुसै होर तरीके कन्नै बरतूनी गी बाधित करने दी लोड़ नेईं होंदी ऐ। इसदे अलावा, aria-atomic="true"
एह् सुनिश्चत करने आस्तै शामल करो जे पूरे टोस्ट गी हमेशा इक (परमाणु) इकाई दे रूप च घोशित कीता जा, बशर्ते जे केह् बदलाव कीता गेआ ऐ घोशित कीता जा (जिस कन्नै समस्या पैदा होई सकदी ऐ जेकर तुस सिर्फ टोस्ट दी सामग्री दा इक हिस्सा गै अपडेट करदे ओ, जां जेकर उस्सै टोस्ट सामग्री गी पर प्रदर्शत करदे ओ समें दा इक बाद दा बिंदु)। जेकर लोड़चदी जानकारी प्रक्रिया आस्तै जरूरी ऐ , जियां कि इक फार्म च त्रुट्टी दी सूची आस्तै , तां अलर्ट घटक दा इस्तेमाल करोटोस्ट दी जगह।
ध्यान रक्खो जे टोस्ट पैदा करने जां अपडेट करने थमां पैह् ले लाइव क्षेत्र गी मार्कअप च मौजूद होने दी लोड़ ऐ । जेकर तुस इक गै समें च गतिशील रूप कन्नै दौनें गी पैदा करदे ओ ते उ’नेंगी पृष्ठ च इंजेक्ट करदे ओ तां आमतौर पर उ’नेंगी सहायक तकनीकें आसेआ घोशित नेईं कीता जाग।
तुसेंगी बी सामग्री दे आधार उप्पर role
ते स्तर गी अनुकूलित करने दी लोड़ ऐ। aria-live
जेकर एह् इक त्रुटि जनेह् महत्वपूर्ण संदेश ऐ तां role="alert" aria-live="assertive"
, नेईं ते role="status" aria-live="polite"
विशेषताएं दा इस्तेमाल करो.
जि’यां-जि’यां तुस प्रदर्शत करने आह् ली सामग्री बदलदी ऐ, इस गल्लै गी सुनिश्चत करने आस्तै जे लोकें गी टोस्ट पढ़ने लेई पर्याप्त समां होऐ, समें - delay
समाप्त गी अपडेट करना सुनिश्चत करो।
, दा इस्तेमाल करदे बेल्लै autohide: false
तुसेंगी इक बंद बटन जोड़ना होग तां जे बरतूनी टोस्ट गी खारिज करने दी इजाजत दित्ती जा।
जावास्क्रिप्ट व्यवहार
प्रयोग करना
जावास्क्रिप्ट दे राहें टोस्ट गी आरंभ करो:
विकल्प ऐ
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-animation=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
एनीमेशन दा | बूलियन | सच्च | टोस्ट च इक सीएसएस फीड संक्रमण लागू करो |
ऑटोहाइड करना | बूलियन | सच्च | ऑटो टोस्ट छुपा दे |
चिर | नंबर | 500 |
टोस्ट छुपाने च देरी करो (ms) |
विधियां
एसिंक्रोनस तरीके ते संक्रमण
सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर इसदे खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .
होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .
$().toast(options)
इक तत्व संग्रह कन्नै इक टोस्ट हैंडलर संलग्न करदा ऐ।
.toast('show')
इक तत्व दा टोस्ट उजागर करदा ऐ। टोस्ट गी असल च दस्से जाने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ । shown.bs.toast
तुसेंगी इस तरीके गी मैन्युअल रूप कन्नै बुलाना होग, इसदे बजाय तुंदा टोस्ट नेईं दस्सग।
.toast('hide')
इक तत्व दा टोस्ट छिपांदा ऐ। टोस्ट गी असल च छिपाने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ । hidden.bs.toast
तुसें गी इस विधि गी मैन्युअल रूप कन्नै बुलाना होग जेकर तुसें गी बनाया autohide
ऐ false
.
.toast('dispose')
इक तत्व दा टोस्ट छिपांदा ऐ। तुंदा टोस्ट डीओएम पर गै रौह्ग पर हून नेईं दस्सग।
घटनाएं
घटना दा प्रकार | ब्यौरा |
---|---|
दिखाओ।बीएस।टोस्ट | show इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बीएस.टोस्ट | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी गी दिक्खने च मदद दित्ती जंदी ऐ। |
छिपाओ।बीएस।टोस्ट | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपे दा।बी.एस.टोस्ट | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टोस्ट गी बरतूनी थमां छिपाना समाप्त होई जंदा ऐ। |