टोस्ट

आपल्या अभ्यागतांना टोस्ट, हलके आणि सहज सानुकूल करण्यायोग्य अलर्ट संदेशासह सूचना पुश करा.

टोस्ट्स या मोबाइल आणि डेस्कटॉप ऑपरेटिंग सिस्टमद्वारे लोकप्रिय झालेल्या पुश नोटिफिकेशन्सची नक्कल करण्यासाठी डिझाइन केलेल्या हलक्या वजनाच्या सूचना आहेत. ते flexbox सह तयार केले आहेत, त्यामुळे ते संरेखित आणि स्थितीत सोपे आहेत.

आढावा

टोस्ट प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

• जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js .
• कार्यप्रदर्शन कारणांसाठी टोस्ट्स निवडले जातात, म्हणून तुम्ही ते स्वतःच सुरू केले पाहिजेत .
• आपण निर्दिष्ट न केल्यास टोस्ट आपोआप लपतील autohide: false.

उदाहरणे

बेसिक

विस्तारण्यायोग्य आणि अंदाज करण्यायोग्य टोस्टला प्रोत्साहन देण्यासाठी, आम्ही हेडर आणि बॉडीची शिफारस करतो. 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">&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>

अधिक सूचना व्युत्पन्न करणार्‍या सिस्टीमसाठी, रॅपिंग घटक वापरण्याचा विचार करा जेणेकरून ते सहजपणे स्टॅक करू शकतील.

<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 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, वापरकर्त्यांना टोस्ट डिसमिस करण्याची परवानगी देण्यासाठी तुम्ही क्लोज बटण जोडणे आवश्यक आहे.

<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>

JavaScript वर्तन

वापर

JavaScript द्वारे टोस्ट सुरू करा:

$('.toast').toast(option)

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

पद्धती

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

कार्यक्रम

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})