టోస్ట్లు
టోస్ట్, తేలికైన మరియు సులభంగా అనుకూలీకరించదగిన హెచ్చరిక సందేశంతో మీ సందర్శకులకు నోటిఫికేషన్లను పుష్ చేయండి.
టోస్ట్లు మొబైల్ మరియు డెస్క్టాప్ ఆపరేటింగ్ సిస్టమ్ల ద్వారా ప్రాచుర్యం పొందిన పుష్ నోటిఫికేషన్లను అనుకరించడానికి రూపొందించబడిన తేలికపాటి నోటిఫికేషన్లు. అవి ఫ్లెక్స్బాక్స్తో నిర్మించబడ్డాయి, కాబట్టి వాటిని సమలేఖనం చేయడం మరియు ఉంచడం సులభం.
అవలోకనం
టోస్ట్ ప్లగ్ఇన్ని ఉపయోగిస్తున్నప్పుడు తెలుసుకోవలసిన విషయాలు:
- పనితీరు కారణాల కోసం టోస్ట్లు ఎంపిక చేయబడ్డాయి, కాబట్టి మీరు వాటిని మీరే ప్రారంభించాలి .
- మీరు పేర్కొనకపోతే టోస్ట్లు స్వయంచాలకంగా దాచబడతాయి
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 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
). ఇది ఇప్పుడు అవసరం లేదు. అయితే, వెనుకకు అనుకూలత కోసం, మా స్క్రిప్ట్ తదుపరి ప్రధాన సంస్కరణ వరకు తరగతిని (దీనికి ఆచరణాత్మక అవసరం లేనప్పటికీ) టోగుల్ చేయడం కొనసాగిస్తుంది.
ప్రత్యక్ష ఉదాహరణ
డిఫాల్ట్గా దాచబడిన టోస్ట్ను (దిగువ కుడి మూలలో మా యుటిలిటీలతో ఉంచబడింది) చూపడానికి దిగువ బటన్ను క్లిక్ చేయండి.
<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" 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>
మా లైవ్ టోస్ట్ డెమోని ట్రిగ్గర్ చేయడానికి మేము కింది జావాస్క్రిప్ట్ని ఉపయోగిస్తాము:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
అపారదర్శక
టోస్ట్లు వాటి క్రింద ఉన్న వాటితో కలపడానికి కొద్దిగా అపారదర్శకంగా ఉంటాయి.
<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>
అనుకూల కంటెంట్
ఉప-భాగాలను తీసివేయడం ద్వారా, వాటిని యుటిలిటీలతో ట్వీకింగ్ చేయడం ద్వారా లేదా మీ స్వంత మార్కప్ని జోడించడం ద్వారా మీ టోస్ట్లను అనుకూలీకరించండి. ఇక్కడ మేము డిఫాల్ట్ను తీసివేసి, బూట్స్ట్రాప్.toast-header
చిహ్నాల నుండి అనుకూల దాచు చిహ్నాన్ని జోడించడం ద్వారా మరియు లేఅవుట్ను సర్దుబాటు చేయడానికి కొన్ని ఫ్లెక్స్బాక్స్ యుటిలిటీలను ఉపయోగించడం ద్వారా సరళమైన టోస్ట్ని సృష్టించాము.
<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
మరియు .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>
మరిన్ని నోటిఫికేషన్లను రూపొందించే సిస్టమ్ల కోసం, ర్యాపింగ్ ఎలిమెంట్ని ఉపయోగించడాన్ని పరిగణించండి, తద్వారా అవి సులభంగా పేర్చవచ్చు.
<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 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
, టోస్ట్ని తీసివేయడానికి వినియోగదారులను అనుమతించడానికి మీరు తప్పనిసరిగా క్లోజ్ బటన్ను జోడించాలి.
<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
.
సాస్
వేరియబుల్స్
$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($black, .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($black, .05);
వాడుక
జావాస్క్రిప్ట్ ద్వారా టోస్ట్లను ప్రారంభించండి:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return 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=""
.
పేరు | టైప్ చేయండి | డిఫాల్ట్ | వివరణ |
---|---|---|---|
animation |
బూలియన్ | true |
టోస్ట్కి CSS ఫేడ్ ట్రాన్సిషన్ని వర్తింపజేయండి |
autohide |
బూలియన్ | true |
టోస్ట్ను ఆటో దాచండి |
delay |
సంఖ్య | 5000 |
టోస్ట్ను దాచడం ఆలస్యం (మిసె) |
పద్ధతులు
అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు
అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .
మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .
చూపించు
మూలకం యొక్క టోస్ట్ని వెల్లడిస్తుంది. టోస్ట్ వాస్తవంగా చూపబడక ముందే కాలర్కి తిరిగి వస్తుంది (అంటే shown.bs.toast
ఈవెంట్ జరగడానికి ముందు). మీరు ఈ పద్ధతిని మాన్యువల్గా కాల్ చేయాలి, బదులుగా మీ టోస్ట్ చూపబడదు.
toast.show()
దాచు
మూలకం యొక్క టోస్ట్ను దాచిపెడుతుంది. టోస్ట్ వాస్తవంగా దాచబడకముందే (అంటే hidden.bs.toast
ఈవెంట్ జరగడానికి ముందు) కాలర్కి తిరిగి వస్తుంది. మీరు చేసినట్లయితే మీరు ఈ పద్ధతిని మాన్యువల్గా కాల్ autohide
చేయాలి false
.
toast.hide()
పారవేయండి
మూలకం యొక్క టోస్ట్ను దాచిపెడుతుంది. మీ టోస్ట్ DOMలో అలాగే ఉంటుంది కానీ ఇకపై చూపబడదు.
toast.dispose()
getInstance
DOM మూలకంతో అనుబంధించబడిన టోస్ట్ ఉదాహరణను పొందడానికి మిమ్మల్ని అనుమతించే స్టాటిక్ పద్ధతి
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
DOM ఎలిమెంట్తో అనుబంధించబడిన టోస్ట్ ఉదాహరణను పొందడానికి మిమ్మల్ని అనుమతించే స్టాటిక్ మెథడ్ లేదా అది ప్రారంభించబడనట్లయితే కొత్తదాన్ని సృష్టించండి
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...
})