टोस्ट
आपल्या अभ्यागतांना टोस्ट, हलके आणि सहज सानुकूल करण्यायोग्य अलर्ट संदेशासह सूचना पुश करा.
टोस्ट्स या मोबाइल आणि डेस्कटॉप ऑपरेटिंग सिस्टमद्वारे लोकप्रिय झालेल्या पुश नोटिफिकेशन्सची नक्कल करण्यासाठी डिझाइन केलेल्या हलक्या वजनाच्या सूचना आहेत. ते flexbox सह तयार केले आहेत, त्यामुळे ते संरेखित आणि स्थितीत सोपे आहेत.
आढावा
टोस्ट प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:
- जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहे
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>
प्लेसमेंट
तुम्हाला गरजेनुसार सानुकूल CSS सह टोस्ट ठेवा. वरच्या मध्याप्रमाणेच वरचा उजवा भाग अनेकदा सूचनांसाठी वापरला जातो. जर तुम्ही एका वेळी फक्त एक टोस्ट दाखवणार असाल, तर पोझिशनिंग शैली थेट वर ठेवा .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
.
JavaScript वर्तन
वापर
JavaScript द्वारे टोस्ट सुरू करा:
$('.toast').toast(option)
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-animation=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
अॅनिमेशन | बुलियन | खरे | टोस्टवर CSS फेड ट्रान्झिशन लागू करा |
स्वयं लपवा | बुलियन | खरे | स्वयं टोस्ट लपवा |
विलंब | संख्या | 500 |
टोस्ट लपविण्यास विलंब करा (ms) |
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
$().toast(options)
घटक संग्रहात टोस्ट हँडलर संलग्न करते.
.toast('show')
घटकाचा टोस्ट प्रकट करतो. टोस्ट प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे shown.bs.toast
इव्हेंट होण्यापूर्वी). तुम्हाला ही पद्धत मॅन्युअली कॉल करावी लागेल, त्याऐवजी तुमचा टोस्ट दिसणार नाही.
$('#element').toast('show')
.toast('hide')
घटकाचा टोस्ट लपवतो. टोस्ट प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येतो (म्हणजे hidden.bs.toast
घटना घडण्यापूर्वी). जर तुम्ही केले असेल तर तुम्हाला ही पद्धत व्यक्तिचलितपणे कॉल करावी autohide
लागेल false
.
$('#element').toast('hide')
.toast('dispose')
घटकाचा टोस्ट लपवतो. तुमचा टोस्ट DOM वर राहील पण यापुढे दिसणार नाही.
$('#element').toast('dispose')
कार्यक्रम
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
शो.बीएस.टोस्ट | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
दाखवले.bs.टोस्ट | जेव्हा टोस्ट वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो. |
hide.bs.toast | hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.toast | टोस्ट वापरकर्त्यापासून लपवून ठेवणे पूर्ण झाल्यावर हा कार्यक्रम काढला जातो. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})