టోస్ట్లు
టోస్ట్, తేలికైన మరియు సులభంగా అనుకూలీకరించదగిన హెచ్చరిక సందేశంతో మీ సందర్శకులకు నోటిఫికేషన్లను పుష్ చేయండి.
టోస్ట్లు మొబైల్ మరియు డెస్క్టాప్ ఆపరేటింగ్ సిస్టమ్ల ద్వారా ప్రాచుర్యం పొందిన పుష్ నోటిఫికేషన్లను అనుకరించడానికి రూపొందించబడిన తేలికపాటి నోటిఫికేషన్లు. అవి ఫ్లెక్స్బాక్స్తో నిర్మించబడ్డాయి, కాబట్టి వాటిని సమలేఖనం చేయడం మరియు ఉంచడం సులభం.
అవలోకనం
టోస్ట్ ప్లగ్ఇన్ని ఉపయోగిస్తున్నప్పుడు తెలుసుకోవలసిన విషయాలు:
- మీరు మూలం నుండి మా జావాస్క్రిప్ట్ని రూపొందిస్తున్నట్లయితే, దీనికి అవసరం
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">×</span>
</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 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<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">×</span>
</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 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">×</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">×</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">×</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">×</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">×</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">×</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="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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
సాంకేతికంగా మీ టోస్ట్లో ఫోకస్ చేయదగిన/చర్య చేయగల నియంత్రణలను (అదనపు బటన్లు లేదా లింక్లు వంటివి) జోడించడం సాధ్యమైనప్పటికీ, టోస్ట్లను స్వయంచాలకంగా దాచడం కోసం మీరు దీన్ని చేయకుండా ఉండాలి. మీరు టోస్ట్కు ఎక్కువ delay
సమయం ఇచ్చినప్పటికీ , కీబోర్డ్ మరియు సహాయక సాంకేతికత వినియోగదారులు చర్య తీసుకోవడానికి సమయానికి టోస్ట్ను చేరుకోవడం కష్టంగా ఉండవచ్చు (టోస్ట్లు ప్రదర్శించబడినప్పుడు ఫోకస్ అందుకోలేవు కాబట్టి). మీరు ఖచ్చితంగా మరిన్ని నియంత్రణలను కలిగి ఉంటే, తో టోస్ట్ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము autohide: false
.
జావాస్క్రిప్ట్ ప్రవర్తన
వాడుక
జావాస్క్రిప్ట్ ద్వారా టోస్ట్లను ప్రారంభించండి:
$('.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...
})