टोस्ट्

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

इस पृष्ठ पर

टोस्ट् इति लघुसूचनाः सन्ति, ये पुश-सूचनाः अनुकरणाय विनिर्मिताः सन्ति, ये मोबाईल-डेस्कटॉप्-प्रचालन-प्रणालीभिः लोकप्रियाः कृताः सन्ति । ते flexbox इत्यनेन सह निर्मिताः सन्ति, अतः तेषां संरेखणं स्थापयितुं च सुलभम् अस्ति ।

अवलोकनम्

टोस्ट् प्लगिन् इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:

टोस्ट् प्रदर्शनकारणात् ऑप्ट-इन भवन्ति, अतः भवान् स्वयमेव तान् आरभणीयम् .
यदि भवान् न निर्दिशति तर्हि टोस्ट् स्वयमेव गोपनीयं भविष्यति 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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

स्तम्भनम्

भवन्तः टोस्ट्-पात्रे वेष्टयित्वा टोस्ट्-इत्येतत् स्तम्भयितुं शक्नुवन्ति, यत् लम्बवत् किञ्चित् अन्तरं योजयिष्यति ।

पश्यतु? एवम् एव ।

शिरः उपरि, टोस्ट् स्वयमेव स्तम्भयिष्यति

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

कस्टम सामग्री

उपघटकानाम् अपसारयित्वा, उपयोगिताभिः सह tweaking कृत्वा , अथवा स्वस्य मार्कअपं योजयित्वा स्वस्य टोस्ट् अनुकूलितं कुर्वन्तु । अत्र वयं पूर्वनिर्धारितं निष्कास्य सरलतरं टोस्ट् निर्मितवन्तः , Bootstrap Icons.toast-header तः कस्टम् hide चिह्नं योजयित्वा , तथा च लेआउट् समायोजयितुं केषाञ्चन flexbox उपयोगितानां उपयोगेन ।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

वैकल्पिकरूपेण, भवान् टोस्ट् मध्ये अतिरिक्तनियन्त्रणानि घटकानि च योजयितुं शक्नोति ।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

वर्ण योजनाएँ

उपर्युक्त उदाहरणस्य आधारेण, भवान् अस्माकं वर्णस्य पृष्ठभूमिस्य च उपयोगितायाः सह भिन्नानि टोस्ट् वर्णयोजनानि निर्मातुम् अर्हति । अत्र वयं , इत्यत्र .bg-primaryच योजितवन्तः, ततः अस्माकं close बटन् मध्ये योजितवन्तः । कुरकुराधारस्य कृते, वयं पूर्वनिर्धारितं सीमां निष्कासयामः ..text-white.toast.btn-close-white.border-0

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

स्थापनम्

यथा आवश्यकता भवति तथा कस्टम् CSS इत्यनेन सह टोस्ट् स्थापयन्तु। उपरि दक्षिणभागः प्रायः सूचनानां कृते उपयुज्यते, यथा उपरि मध्यभागः अपि । यदि भवान् केवलं कदापि एकस्मिन् समये एकं टोस्ट् दर्शयितुं गच्छति तर्हि स्थितिशैल्याः सम्यक् उपरि स्थापयतु .toast।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

अधिकानि सूचनानि जनयन्तः प्रणाल्याः कृते, एकं wrapping element इत्यस्य उपयोगं विचारयन्तु येन ते सहजतया stack कर्तुं शक्नुवन्ति ।

पश्यतु? एवम् एव ।

शिरः उपरि, टोस्ट् स्वयमेव स्तम्भयिष्यति

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

यद्यपि तकनीकीरूपेण भवतः टोस्ट् मध्ये केन्द्रीकरणीय/क्रियाशीलनियन्त्रणानि (यथा अतिरिक्तबटनानि वा लिङ्कानि) योजयितुं शक्यते तथापि स्वतःगोपनटोस्ट् कृते एतत् कर्तुं भवद्भिः परिहारः करणीयः Even if you give the toast a long delaytimeout , कीबोर्ड तथा सहायक प्रौद्योगिकी उपयोक्तारः कार्यवाही कर्तुं समये टोस्ट् प्राप्तुं कठिनं अनुभवितुं शक्नुवन्ति (यतोहि टोस्ट् प्रदर्शितस्य समये फोकस न प्राप्नुवन्ति)। यदि भवतः सर्वथा अधिकानि नियन्त्रणानि भवितुमर्हन्ति तर्हि वयं टोस्ट् इत्यस्य उपयोगं अनुशंसयामः autohide: false.

सस्स

चर

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

प्रयोगः

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-animation=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
`animation`	बूलियन इति	`true`	टोस्ट् मध्ये CSS फेड संक्रमणं प्रयोजयन्तु
`autohide`	बूलियन इति	`true`	ऑटो टोस्ट को छिपाएं
`delay`	संख्या	`5000`	टोस्ट् गोपने विलम्बः (ms) .

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

दर्शयतु

एकस्य तत्त्वस्य टोस्ट् प्रकाशयति। टोस्ट् वास्तवतः दर्शितस्य पूर्वं (अर्थात् shown.bs.toastघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । भवद्भिः एतत् पद्धतिं मैन्युअल् रूपेण आह्वयितव्यम्, तस्य स्थाने भवतः टोस्ट् न दर्शयिष्यति ।

toast.show()

गोपयतु

एकस्य तत्त्वस्य टोस्ट् गोपयति। टोस्ट् वस्तुतः गोपनीयत्वात् पूर्वं (अर्थात् hidden.bs.toastघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । भवद्भिः एतत् मेथड् मैन्युअल् रूपेण आह्वयितव्यं यदि autohideभवान् false.

toast.hide()

विसर्जयेत्

एकस्य तत्त्वस्य टोस्ट् गोपयति। भवतः टोस्ट् DOM इत्यत्र एव तिष्ठति परन्तु इतः परं न दर्शयिष्यति।

toast.dispose()

getInstance इति

स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं scrollspy उदाहरणं प्राप्तुं शक्नोति

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateइन्स्टेंस इति

स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं scrollspy दृष्टान्तं प्राप्तुं शक्नोति, अथवा नूतनं निर्मातुं शक्नोति यद्यपि तत् आरम्भं न कृतम् आसीत्

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

घटनाः

घटना प्रकार	वर्णनम्‌
`show.bs.toast`	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
`shown.bs.toast`	यदा टोस्ट् उपयोक्त्रे दृश्यमानं कृतम् अस्ति तदा एषा घटना प्रज्वलिता भवति ।
`hide.bs.toast`	इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः `hide`आहूता अस्ति ।
`hidden.bs.toast`	यदा टोस्ट् उपयोक्त्रे निगूढं समाप्तं भवति तदा एषा घटना प्रज्वलिता भवति ।

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})