ٽوسٽ
پش نوٽيفڪيشن توهان جي سياحن کي ٽوسٽ سان، هڪ ہلڪو وزن ۽ آساني سان حسب ضرورت خبرداري پيغام سان.
Toasts ہلڪي وزن وارا اطلاع آھن جيڪي پش نوٽيفڪيشن کي نقل ڪرڻ لاءِ ٺاھيا ويا آھن جيڪي موبائل ۽ ڊيسڪ ٽاپ آپريٽنگ سسٽم پاران مشهور ڪيا ويا آھن. اهي flexbox سان ٺهيل آهن، تنهنڪري اهي ترتيب ڏيڻ ۽ پوزيشن ۾ آسان آهن.
اوسر
ٽوسٽ پلگ ان استعمال ڪرڻ وقت ڄاڻڻ جون شيون:
- Toasts آپٽ ان ڪارڪردگي سببن لاءِ آھن، تنھنڪري توھان کي انھن کي پاڻ شروع ڪرڻ گھرجي .
- ٽوسٽ پاڻمرادو لڪائي ڇڏيندو جيڪڏھن توھان وضاحت نه ڪندا
autohide: false
.
prefers-reduced-motion
ميڊيا جي سوال تي منحصر آھي. ڏسو
گھٽ موشن سيڪشن اسان جي رسائي واري دستاويزن جو .
مثال
بنيادي
توسيع ۽ پيش گوئي واري ٽوسٽ جي حوصلا افزائي ڪرڻ لاءِ، اسان سفارش ڪريون ٿا هيڊر ۽ جسم. ٽوسٽ هيڊر استعمال ڪن ٿا display: flex
، اسان جي مارجن ۽ فليڪس باڪس يوٽيلٽيز جي مهرباني مواد جي آسان ترتيب ڏيڻ جي اجازت ڏئي ٿي.
Toasts لچڪدار آهن جيئن توهان جي ضرورت آهي ۽ تمام گهٽ گهربل مارڪ اپ آهي. گھٽ ۾ گھٽ، اسان کي ھڪڙي عنصر جي ضرورت آھي توھان جي "ٽوسٽ ٿيل" مواد تي مشتمل آھي ۽ ھڪڙي برطرفي واري بٽڻ کي مضبوطيء سان حوصلا افزائي ڪريون.
<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 افاديت سان ٽوسٽ کي افقي ۽ / يا عمودي طور تي ترتيب ڏيڻ لاءِ.
<!-- 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
Toasts جو مقصد توھان جي سياحن يا استعمال ڪندڙن لاءِ ننڍڙيون رڪاوٽون آھن، تنھنڪري انھن جي مدد ڪرڻ لاءِ جيڪي اسڪرين ريڊرز ۽ ساڳين مددگار ٽيڪنالاجيز سان گڏ آھن، توھان کي پنھنجي ٽوسٽ کي ھڪڙي علائقي ۾ لپيٽڻ گھرجي . جيئري علائقن ۾ تبديليون (جهڙوڪ ٽوسٽ جزو کي انجڻ/اپڊيٽ ڪرڻ) خودڪار طور تي اسڪرين ريڊرز طرفان اعلان ڪيو ويندو آهي بغير ڪنهن صارف جي توجہ کي منتقل ڪرڻ يا ٻي صورت ۾ صارف کي مداخلت ڪرڻ جي ضرورت آهي. اضافي طور تي، 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 |
ٽوسٽ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو |
autohide |
بولين | true |
خودڪار ٽوسٽ لڪايو |
delay |
نمبر | 5000 |
ٽوسٽ کي لڪائڻ ۾ دير ڪريو (ايم ايس) |
طريقا
هم وقت سازي طريقا ۽ منتقلي
سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن واپس ويندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .
ڏيکارڻ
هڪ عنصر جي ٽوسٽ کي ظاهر ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ٽوسٽ اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.toast
واقعي ٿيڻ کان اڳ). توھان کي دستي طور ھن طريقي کي سڏڻو پوندو، ان جي بدران توھان جو ٽوسٽ نه ڏيکاريندو.
toast.show()
لڪائڻ
هڪ عنصر جي ٽوسٽ کي لڪائيندو آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽوسٽ اصل ۾ لڪايو ويو آهي (يعني hidden.bs.toast
واقعي ٿيڻ کان اڳ). توهان کي دستي طور تي هن طريقي کي ڪال ڪرڻو پوندو جيڪڏهن توهان autohide
ڪيو آهي false
.
toast.hide()
نيڪال ڪرڻ
هڪ عنصر جي ٽوسٽ کي لڪائيندو آهي. توھان جو ٽوسٽ ڊوم تي رھندو پر وڌيڪ نه ڏيکاريندو.
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...
})