Source

టోస్ట్‌లు

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

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

అవలోకనం

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

  • మీరు మూలం నుండి మా జావాస్క్రిప్ట్‌ని రూపొందిస్తున్నట్లయితే, దీనికి అవసరంutil.js .
  • పనితీరు కారణాల కోసం టోస్ట్‌లు ఎంపిక చేయబడ్డాయి, కాబట్టి మీరు వాటిని మీరే ప్రారంభించాలి .
  • టోస్ట్‌లను ఉంచడానికి మీరు బాధ్యత వహిస్తారని దయచేసి గమనించండి.
  • మీరు పేర్కొనకపోతే టోస్ట్‌లు స్వయంచాలకంగా దాచబడతాయి autohide: false.

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

ఉదాహరణలు

ప్రాథమిక

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

బూట్స్ట్రాప్ 11 నిమిషాల క్రితం
హలో, ప్రపంచం! ఇది టోస్ట్ సందేశం.
<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>

జావాస్క్రిప్ట్ ప్రవర్తన

వాడుక

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

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

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-animation="".

పేరు టైప్ చేయండి డిఫాల్ట్ వివరణ
యానిమేషన్ బూలియన్ నిజం టోస్ట్‌కి CSS ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి
స్వయంచాలకంగా దాచు బూలియన్ నిజం టోస్ట్‌ను ఆటో దాచండి
ఆలస్యం సంఖ్య 500 టోస్ట్‌ను దాచడం ఆలస్యం (మిసె)

పద్ధతులు

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

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

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

$().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.టోస్ట్ ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show.
చూపిన.bs.టోస్ట్ టోస్ట్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది.
hide.bs.టోస్ట్ hideఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది .
దాచిన.bs.టోస్ట్ టోస్ట్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది.
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})