ټاسټونه
خپلو لیدونکو ته خبرتیاوې د ټوسټ ، لږ وزن لرونکي او په اسانۍ سره د تنظیم وړ خبرتیا پیغام سره فشار ورکړئ.
ټوسټونه لږ وزن لرونکي خبرتیاوې دي چې د پش خبرتیاو نقل کولو لپاره ډیزاین شوي چې د ګرځنده او ډیسټاپ عملیاتي سیسټمونو لخوا مشهور شوي. دوی د فلیکس بکس سره جوړ شوي، نو دوی د ترتیب او موقعیت لپاره اسانه دي.
کتنه
د ټوسټ پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:
- ټاسټونه د فعالیت دلایلو لپاره غوره شوي ، نو تاسو باید دوی پخپله پیل کړئ .
- ټاسټونه به په اوتومات ډول پټ شي که تاسو مشخص نه کړئ
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 |
د ټوسټ پټول ځنډول (ms) |
میتودونه
غیر متناسب میتودونه او لیږدونه
ټولې 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...
})