टोस्ट्
टोस्ट्, हल्केन सुलभतया अनुकूलनीयेन च सचेतनासन्देशेन सह स्व आगन्तुकानां कृते सूचनाः धक्कायन्तु।
टोस्ट् इति लघुसूचनाः सन्ति, ये पुश-सूचनाः अनुकरणाय विनिर्मिताः सन्ति, ये मोबाईल-डेस्कटॉप्-प्रचालन-प्रणालीभिः लोकप्रियाः कृताः सन्ति । ते flexbox इत्यनेन सह निर्मिताः सन्ति, अतः तेषां संरेखणं स्थापयितुं च सुलभम् अस्ति ।
अवलोकनम्
टोस्ट् प्लगिन् इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:
- यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकता
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">×</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>
अधिकानि सूचनानि जनयन्तः प्रणाल्याः कृते, एकं wrapping element इत्यस्य उपयोगं विचारयन्तु येन ते सहजतया stack कर्तुं शक्नुवन्ति ।
<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 उपयोगिताभिः सह अपि भवन्तः आडम्बरं प्राप्तुं शक्नुवन्ति ।
<!-- 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
, उपयोक्तृभ्यः टोस्ट् निष्कासयितुं अनुमतिं दातुं भवद्भिः close बटनं योजयितव्यम् ।
<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>
यद्यपि तकनीकीरूपेण भवतः टोस्ट् मध्ये केन्द्रीकरणीय/क्रियाशीलनियन्त्रणानि (यथा अतिरिक्तबटनानि वा लिङ्कानि) योजयितुं शक्यते तथापि स्वतःगोपनटोस्ट् कृते एतत् कर्तुं भवद्भिः परिहारः करणीयः Even if you give the toast a long delay
timeout , कीबोर्ड तथा सहायक प्रौद्योगिकी उपयोक्तारः कार्यवाही कर्तुं समये टोस्ट् प्राप्तुं कठिनं अनुभवितुं शक्नुवन्ति (यतोहि टोस्ट् प्रदर्शितस्य समये फोकस न प्राप्नुवन्ति)। यदि भवतः सर्वथा अधिकानि नियन्त्रणानि भवितुमर्हन्ति तर्हि वयं टोस्ट् इत्यस्य उपयोगं अनुशंसयामः autohide: false
.
जावास्क्रिप्ट व्यवहार
प्रयोगः
जावास्क्रिप्ट् मार्गेण टोस्ट् आरभत:
$('.toast').toast(option)
विकल्पाः
विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-
योजयन्तु data-animation=""
।
नामः | प्रकारः | मूलभूतम् | वर्णनम् |
---|---|---|---|
एनिमेशन | बूलियन इति | सत्यम् | टोस्ट् मध्ये CSS फेड संक्रमणं प्रयोजयन्तु |
autohide इति | बूलियन इति | सत्यम् | ऑटो टोस्ट को छिपाएं |
विलम्बः | संख्या | 500 |
टोस्ट् गोपने विलम्बः (ms) . |
विधियाँ
अतुल्यकालिक विधियाँ एवं संक्रमण
सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .
$().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.toast इति दर्शयतु | एषा घटना तत्क्षणमेव प्रज्वलति यदा show दृष्टान्तविधिः आह्वयते । |
दर्शितम्.bs.toast | यदा टोस्ट् उपयोक्त्रे दृश्यमानं कृतम् अस्ति तदा एषा घटना प्रज्वलिता भवति । |
hide.bs.toast इति | इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hide आहूता अस्ति । |
गुप्त.ब्स्.टोस्ट् | यदा टोस्ट् उपयोक्त्रे निगूढं समाप्तं भवति तदा एषा घटना प्रज्वलिता भवति । |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})