టోస్ట్‌లు

టోస్ట్, తేలికైన మరియు సులభంగా అనుకూలీకరించదగిన హెచ్చరిక సందేశంతో మీ సందర్శకులకు నోటిఫికేషన్‌లను పుష్ చేయండి.

ఈ పేజీలో

టోస్ట్‌లు మొబైల్ మరియు డెస్క్‌టాప్ ఆపరేటింగ్ సిస్టమ్‌ల ద్వారా ప్రాచుర్యం పొందిన పుష్ నోటిఫికేషన్‌లను అనుకరించడానికి రూపొందించబడిన తేలికపాటి నోటిఫికేషన్‌లు. అవి ఫ్లెక్స్‌బాక్స్‌తో నిర్మించబడ్డాయి, కాబట్టి వాటిని సమలేఖనం చేయడం మరియు ఉంచడం సులభం.

అవలోకనం

టోస్ట్ ప్లగ్ఇన్‌ని ఉపయోగిస్తున్నప్పుడు తెలుసుకోవలసిన విషయాలు:

పనితీరు కారణాల కోసం టోస్ట్‌లు ఎంపిక చేయబడ్డాయి, కాబట్టి మీరు వాటిని మీరే ప్రారంభించాలి .
మీరు పేర్కొనకపోతే టోస్ట్‌లు స్వయంచాలకంగా దాచబడతాయి autohide: false.

ఈ భాగం యొక్క యానిమేషన్ ప్రభావం prefers-reduced-motionమీడియా ప్రశ్నపై ఆధారపడి ఉంటుంది. మా యాక్సెసిబిలిటీ డాక్యుమెంటేషన్ యొక్క తగ్గిన చలన విభాగాన్ని చూడండి .

ఉదాహరణలు

ప్రాథమిక

విస్తరించదగిన మరియు ఊహాజనిత టోస్ట్‌లను ప్రోత్సహించడానికి, మేము హెడర్ మరియు బాడీని సిఫార్సు చేస్తున్నాము. టోస్ట్ హెడర్‌లు ఉపయోగిస్తాయి display: flex, మా మార్జిన్ మరియు ఫ్లెక్స్‌బాక్స్ యుటిలిటీల కారణంగా కంటెంట్‌ను సులభంగా సమలేఖనం చేయడానికి అనుమతిస్తుంది.

టోస్ట్‌లు మీకు కావలసినంత అనువైనవి మరియు చాలా తక్కువ అవసరమైన మార్కప్‌ను కలిగి ఉంటాయి. కనిష్టంగా, మీ “టోస్ట్ చేసిన” కంటెంట్‌ని కలిగి ఉండటానికి మరియు తీసివేయి బటన్‌ను గట్టిగా ప్రోత్సహించడానికి మాకు ఒక మూలకం అవసరం.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

<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టోస్ట్‌ను పూర్తిగా దాచడానికి క్లాస్‌ని డైనమిక్‌గా జోడించాయి (తో display:none, తో కాకుండా opacity:0). ఇది ఇప్పుడు అవసరం లేదు. అయితే, వెనుకకు అనుకూలత కోసం, మా స్క్రిప్ట్ తదుపరి ప్రధాన సంస్కరణ వరకు తరగతిని (దీనికి ఆచరణాత్మక అవసరం లేనప్పటికీ) టోగుల్ చేయడం కొనసాగిస్తుంది.

ప్రత్యక్ష ఉదాహరణ

డిఫాల్ట్‌గా దాచబడిన టోస్ట్‌ను (దిగువ కుడి మూలలో మా యుటిలిటీలతో ఉంచబడింది) చూపడానికి దిగువ బటన్‌ను క్లిక్ చేయండి.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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>

మా లైవ్ టోస్ట్ డెమోని ట్రిగ్గర్ చేయడానికి మేము కింది జావాస్క్రిప్ట్‌ని ఉపయోగిస్తాము:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

అపారదర్శక

టోస్ట్‌లు వాటి క్రింద ఉన్న వాటితో కలపడానికి కొద్దిగా అపారదర్శకంగా ఉంటాయి.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

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

స్టాకింగ్

మీరు టోస్ట్‌లను టోస్ట్ కంటైనర్‌లో చుట్టడం ద్వారా వాటిని పేర్చవచ్చు, ఇది నిలువుగా కొంత అంతరాన్ని జోడిస్తుంది.

చూడండి? ఇలాగే.

హెచ్చరికలు, టోస్ట్‌లు స్వయంచాలకంగా పేర్చబడతాయి

html

<div class="toast-container position-static">
  <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>

అనుకూల కంటెంట్

ఉప-భాగాలను తీసివేయడం ద్వారా, వాటిని యుటిలిటీలతో ట్వీకింగ్ చేయడం ద్వారా లేదా మీ స్వంత మార్కప్‌ని జోడించడం ద్వారా మీ టోస్ట్‌లను అనుకూలీకరించండి. ఇక్కడ మేము డిఫాల్ట్‌ను తీసివేసి, బూట్‌స్ట్రాప్.toast-header చిహ్నాల నుండి అనుకూల దాచు చిహ్నాన్ని జోడించడం ద్వారా మరియు లేఅవుట్‌ను సర్దుబాటు చేయడానికి కొన్ని ఫ్లెక్స్‌బాక్స్ యుటిలిటీలను ఉపయోగించడం ద్వారా సరళమైన టోస్ట్‌ని సృష్టించాము.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

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

ప్రత్యామ్నాయంగా, మీరు టోస్ట్‌లకు అదనపు నియంత్రణలు మరియు భాగాలను కూడా జోడించవచ్చు.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

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

రంగు పథకాలు

పై ఉదాహరణ ఆధారంగా, మీరు మా రంగు మరియు నేపథ్య ప్రయోజనాలతో విభిన్న టోస్ట్ కలర్ స్కీమ్‌లను సృష్టించవచ్చు. .text-bg-primaryఇక్కడ మేము కు జోడించాము .toast, ఆపై .btn-close-whiteమా క్లోజ్ బటన్‌కు జోడించాము. స్ఫుటమైన అంచు కోసం, మేము తో డిఫాల్ట్ అంచుని తీసివేస్తాము .border-0.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

<div class="toast align-items-center text-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.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

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

మరిన్ని నోటిఫికేషన్‌లను రూపొందించే సిస్టమ్‌ల కోసం, ర్యాపింగ్ ఎలిమెంట్‌ని ఉపయోగించడాన్ని పరిగణించండి, తద్వారా అవి సులభంగా పేర్చవచ్చు.

చూడండి? ఇలాగే.

హెచ్చరికలు, టోస్ట్‌లు స్వయంచాలకంగా పేర్చబడతాయి

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

టోస్ట్‌లను క్షితిజ సమాంతరంగా మరియు/లేదా నిలువుగా సమలేఖనం చేయడానికి మీరు ఫ్లెక్స్‌బాక్స్ యుటిలిటీలతో ఫ్యాన్సీని కూడా పొందవచ్చు.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

<!-- 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, టోస్ట్‌ని తీసివేయడానికి వినియోగదారులను అనుమతించడానికి మీరు తప్పనిసరిగా క్లోజ్ బటన్‌ను జోడించాలి.

హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.

html

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

సాంకేతికంగా మీ టోస్ట్‌లో ఫోకస్ చేయదగిన/చర్య చేయగల నియంత్రణలను (అదనపు బటన్‌లు లేదా లింక్‌లు వంటివి) జోడించడం సాధ్యమైనప్పటికీ, టోస్ట్‌లను స్వయంచాలకంగా దాచడం కోసం మీరు దీన్ని చేయకుండా ఉండాలి. మీరు టోస్ట్‌కు ఎక్కువ delayసమయం ఇచ్చినప్పటికీ , కీబోర్డ్ మరియు సహాయక సాంకేతికత వినియోగదారులు చర్య తీసుకోవడానికి సమయానికి టోస్ట్‌ను చేరుకోవడం కష్టంగా ఉండవచ్చు (టోస్ట్‌లు ప్రదర్శించబడినప్పుడు ఫోకస్ అందుకోలేవు కాబట్టి). మీరు ఖచ్చితంగా మరిన్ని నియంత్రణలను కలిగి ఉంటే, తో టోస్ట్‌ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము autohide: false.

CSS

వేరియబుల్స్

v5.2.0లో జోడించబడింది

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న CSS వేరియబుల్స్ విధానంలో భాగంగా, .toastమెరుగుపరచబడిన నిజ-సమయ అనుకూలీకరణ కోసం టోస్ట్‌లు ఇప్పుడు స్థానిక CSS వేరియబుల్‌లను ఉపయోగిస్తున్నాయి. CSS వేరియబుల్స్ కోసం విలువలు Sass ద్వారా సెట్ చేయబడతాయి, కాబట్టి Sass అనుకూలీకరణకు ఇప్పటికీ మద్దతు ఉంది.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

సాస్ వేరియబుల్స్

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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($black, .05);

వాడుక

జావాస్క్రిప్ట్ ద్వారా టోస్ట్‌లను ప్రారంభించండి:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

ట్రిగ్గర్స్

దిగువ ప్రదర్శించిన విధంగా టోస్ట్‌లోనిdata బటన్‌పై ఉన్న లక్షణంతో తొలగింపును సాధించవచ్చు :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

లేదా దిగువ ప్రదర్శించిన విధంగా ఉపయోగించి టోస్ట్ వెలుపల ఉన్న బటన్‌పై :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

ఎంపికలు

ఎంపికలు డేటా అట్రిబ్యూట్‌లు లేదా జావాస్క్రిప్ట్ ద్వారా పాస్ చేయగలవు కాబట్టి, మీరు ఎంపిక పేరును data-bs-, లో వలె జోడించవచ్చు data-bs-animation="{value}". డేటా అట్రిబ్యూట్‌ల ద్వారా ఆప్షన్‌లను పాస్ చేస్తున్నప్పుడు ఎంపిక పేరు యొక్క కేస్ రకాన్ని “ కామెల్‌కేస్ ” నుండి “ కబాబ్-కేస్ ”కి మార్చాలని నిర్ధారించుకోండి. ఉదాహరణకు, data-bs-custom-class="beautifier"బదులుగా ఉపయోగించండి data-bs-customClass="beautifier".

బూట్‌స్ట్రాప్ 5.2.0 నాటికి, అన్ని భాగాలు JSON స్ట్రింగ్‌గా సాధారణ కాంపోనెంట్ కాన్ఫిగరేషన్‌ను కలిగి ఉండే ప్రయోగాత్మక రిజర్వు చేయబడిన డేటా లక్షణానికి మద్దతు ఇస్తాయి. data-bs-configమూలకం కలిగి ఉన్నప్పుడు data-bs-config='{"delay":0, "title":123}'మరియు data-bs-title="456"లక్షణాలను కలిగి ఉన్నప్పుడు, తుది titleవిలువ ఉంటుంది 456మరియు ప్రత్యేక డేటా లక్షణాలు న ఇచ్చిన విలువలను భర్తీ చేస్తాయి data-bs-config. అదనంగా, ఇప్పటికే ఉన్న డేటా అట్రిబ్యూట్‌లు వంటి JSON విలువలను కలిగి ఉంటాయి data-bs-delay='{"show":0,"hide":150}'.

పేరు	టైప్ చేయండి	డిఫాల్ట్	వివరణ
`animation`	బూలియన్	`true`	టోస్ట్‌కి CSS ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి.
`autohide`	బూలియన్	`true`	ఆలస్యం తర్వాత టోస్ట్‌ను స్వయంచాలకంగా దాచండి.
`delay`	సంఖ్య	`5000`	టోస్ట్‌ను దాచడానికి ముందు మిల్లీసెకన్లలో ఆలస్యం చేయండి.

పద్ధతులు

అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు

అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .

మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .

పద్ధతి	వివరణ
`dispose`	మూలకం యొక్క టోస్ట్‌ను దాచిపెడుతుంది. మీ టోస్ట్ DOMలో అలాగే ఉంటుంది కానీ ఇకపై చూపబడదు.
`getInstance`	DOM మూలకంతో అనుబంధించబడిన టోస్ట్ ఉదాహరణను పొందడానికి మిమ్మల్ని అనుమతించే స్టాటిక్ పద్ధతి. ఉదాహరణకు: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`బూట్‌స్ట్రాప్ టోస్ట్ ఉదాహరణను అందిస్తుంది.
`getOrCreateInstance`	DOM ఎలిమెంట్‌తో అనుబంధించబడిన టోస్ట్ ఉదాహరణను పొందడానికి లేదా అది ప్రారంభించబడనప్పుడు కొత్తదాన్ని సృష్టించడానికి మిమ్మల్ని అనుమతించే స్టాటిక్ పద్ధతి. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`బూట్‌స్ట్రాప్ టోస్ట్ ఉదాహరణను అందిస్తుంది.
`hide`	మూలకం యొక్క టోస్ట్‌ను దాచిపెడుతుంది. టోస్ట్ వాస్తవంగా దాచబడకముందే (అంటే `hidden.bs.toast`ఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది. మీరు చేసినట్లయితే మీరు ఈ పద్ధతిని మాన్యువల్‌గా కాల్ `autohide`చేయాలి `false`.
`isShown`	టోస్ట్ యొక్క విజిబిలిటీ స్థితి ప్రకారం బూలియన్‌ని అందిస్తుంది.
`show`	మూలకం యొక్క టోస్ట్‌ని వెల్లడిస్తుంది. టోస్ట్ వాస్తవంగా చూపబడక ముందే కాలర్‌కి తిరిగి వస్తుంది (అంటే `shown.bs.toast`ఈవెంట్ జరగడానికి ముందు). మీరు ఈ పద్ధతిని మాన్యువల్‌గా కాల్ చేయాలి, బదులుగా మీ టోస్ట్ చూపబడదు.

ఈవెంట్స్

ఈవెంట్	వివరణ
`hide.bs.toast`	`hide`ఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది .
`hidden.bs.toast`	టోస్ట్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది.
`show.bs.toast`	ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది `show`.
`shown.bs.toast`	టోస్ట్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది.

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