Source

टोस्ट्

टोस्ट्, लघुभारयुक्तेन सुलभतया अनुकूलनीयेन च सचेतनासन्देशेन सह स्व आगन्तुकानां कृते सूचनाः धक्कायन्तु।

टोस्ट् इति लघुसूचनाः सन्ति, ये पुश-सूचनाः अनुकरणाय विनिर्मिताः सन्ति, ये मोबाईल-डेस्कटॉप्-प्रचालन-प्रणालीभिः लोकप्रियाः कृताः सन्ति । ते 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">&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।

बूटस्ट्रैप ११ मिनिट् पूर्वम्
नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति। 
<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>

अधिकानि सूचनानि जनयन्तः प्रणाल्याः कृते, एकं 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">&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, उपयोक्तृभ्यः टोस्ट् निष्कासयितुं अनुमतिं दातुं भवद्भिः 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

जावास्क्रिप्ट व्यवहार

प्रयोगः

जावास्क्रिप्ट् मार्गेण टोस्ट् आरभत:

$('.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...
})