Tostlar
Tost, engil va oson sozlanishi ogohlantirish xabari bilan tashrif buyuruvchilaringizga bildirishnomalarni yuboring.
Tostlar - bu mobil va ish stoli operatsion tizimlarida ommalashgan push-bildirishnomalarni taqlid qilish uchun mo'ljallangan engil bildirishnomalar. Ular flexbox bilan qurilgan, shuning uchun ularni tekislash va joylashtirish oson.
Umumiy koʻrinish
Tost plaginidan foydalanganda bilishingiz kerak bo'lgan narsalar:
- Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladi
util.js
. - Tostlar unumdorligi sababli tanlanadi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
- Iltimos, tostlarni joylashtirish uchun siz javobgar ekanligingizni unutmang.
- Agar ko'rsatmasangiz, tostlar avtomatik ravishda yashiriladi
autohide: false
.
prefers-reduced-motion
media so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang
.
Misollar
Asosiy
Kengaytiriladigan va bashorat qilinadigan tostlarni rag'batlantirish uchun biz sarlavha va tanani tavsiya qilamiz. Tost sarlavhalari display: flex
bizning margin va flexbox yordamchi dasturlarimiz tufayli tarkibni oson tekislash imkonini beradi.
Tostlar kerakli darajada moslashuvchan va juda kam talab qilinadigan belgilarga ega. Hech bo'lmaganda, biz "tost" kontentingizni o'z ichiga olishi uchun bitta elementni talab qilamiz va o'chirish tugmasini qattiq rag'batlantiramiz.
<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>
Jonli
Sukut bo'yicha bilan yashirilgan tushdi (pastki o'ng burchakda bizning yordamchi dasturlarimiz bilan joylashtirilgan) ko'rsatish uchun quyidagi tugmani bosing .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>
Shaffof
Tostlar biroz shaffof bo'lib, ularning ostidagi narsalar bilan aralashadi.
<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>
Stacking
Agar sizda bir nechta tostlar bo'lsa, biz ularni o'qilishi mumkin bo'lgan tarzda vertikal ravishda joylashtirishni sukut qilamiz.
<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>
Joylashtirish
Tostlarni kerakli CSS bilan joylashtiring. Yuqori o'ng tomon ko'pincha bildirishnomalar uchun ishlatiladi, xuddi yuqori o'rta. Agar siz bir vaqtning o'zida faqat bitta tushdi ko'rsatmoqchi bo'lsangiz, joylashishni aniqlash uslublarini to'g'ridan-to'g'ri ustiga qo'ying .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>
Ko'proq bildirishnomalarni ishlab chiqaradigan tizimlar uchun ular osongina yig'ilib qolishi uchun o'rash elementidan foydalanishni o'ylab ko'ring.
<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>
Shuningdek, siz tostlarni gorizontal va/yoki vertikal ravishda tekislash uchun flexbox yordam dasturidan zavqlanishingiz mumkin.
<!-- 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>
Foydalanish imkoniyati
Tostlar tashrif buyuruvchilaringiz yoki foydalanuvchilaringiz uchun kichik uzilishlar bo'lishi uchun mo'ljallangan, shuning uchun ekranni o'qiydiganlarga va shunga o'xshash yordamchi texnologiyalarga ega bo'lganlarga yordam berish uchun siz tostlaringizni aria-live
mintaqada o'rashingiz kerak . Jonli hududlardagi o‘zgarishlar (masalan, tost komponentini kiritish/yangilash) foydalanuvchining diqqat markazini siljitmasdan yoki foydalanuvchini boshqa yo‘l bilan to‘xtatmasdan, ekran o‘quvchilari tomonidan avtomatik ravishda e’lon qilinadi. Bunga qo'shimcha aria-atomic="true"
ravishda, nima o'zgartirilganligini e'lon qilishdan ko'ra, to'liq tost har doim yagona (atom) birlik sifatida e'lon qilinishini ta'minlash uchun kiriting (agar siz tost tarkibining faqat bir qismini yangilasangiz yoki bir xil tost tarkibini ko'rsatsangiz, muammolarga olib kelishi mumkin) keyinroq vaqt oralig'ida). Agar kerakli ma'lumotlar jarayon uchun muhim bo'lsa, masalan, formadagi xatolar ro'yxati uchun, ogohlantirish komponentidan foydalaning.tost o'rniga.
Esda tutingki, tost yaratilishi yoki yangilanishidan oldin jonli hudud belgilashda mavjud bo'lishi kerak . Agar siz ikkalasini bir vaqtning o'zida dinamik ravishda yaratsangiz va ularni sahifaga kiritsangiz, ular odatda yordamchi texnologiyalar tomonidan e'lon qilinmaydi.
Shuningdek , tarkibga qarab role
va darajani moslashtirishingiz kerak . aria-live
Xato kabi muhim xabar bo'lsa, dan foydalaning role="alert" aria-live="assertive"
, aks holda role="status" aria-live="polite"
atributlardan foydalaning.
Siz ko'rsatayotgan kontent o'zgarganligi sababli, foydalanuvchilarga tushdi o'qish uchun etarli vaqt bo'lishi uchun delay
kutish vaqtini yangilashni unutmang.
<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>
dan foydalanganda autohide: false
, foydalanuvchilarga tostni rad etishiga ruxsat berish uchun yopish tugmasini qo'shishingiz kerak.
<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>
Texnik jihatdan tostingizga diqqatni qaratadigan/harakatlanadigan boshqaruv elementlarini (masalan, qo‘shimcha tugmalar yoki havolalar) qo‘shish mumkin bo‘lsa-da, tostlarni avtomatik yashirish uchun buni qilishdan qochishingiz kerak. Agar siz tostga uzoq vaqt delay
ajratsangiz ham , klaviatura va yordamchi texnologiya foydalanuvchilari chora ko'rish uchun tostga o'z vaqtida etib borishlari qiyin bo'lishi mumkin (chunki tostlar ko'rsatilganda fokuslanmaydi). Agar sizda qo'shimcha nazorat bo'lishi kerak bo'lsa, tostni ishlatishni tavsiya qilamiz autohide: false
.
JavaScript harakati
Foydalanish
JavaScript orqali tostlarni ishga tushiring:
$('.toast').toast(option)
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-animation=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
animatsiya | mantiqiy | rost | Tost uchun CSS pasaytirish o'tishini qo'llang |
avtomatik yashirish | mantiqiy | rost | Tostni avtomatik yashirish |
kechikish | raqam | 500 |
Tostni yashirishni kechiktirish (ms) |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .
Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .
$().toast(options)
Elementlar kollektsiyasiga tushdi ishlov beruvchisini biriktiradi.
.toast('show')
Elementning tostini ochib beradi. Qo'ng'iroq qiluvchiga tushdi ko'rsatilishidan oldin (ya'ni shown.bs.toast
voqea sodir bo'lishidan oldin) qaytadi. Ushbu usulni qo'lda chaqirishingiz kerak, buning o'rniga tushdi ko'rinmaydi.
$('#element').toast('show')
.toast('hide')
Elementning tostini yashiradi. Qo'ng'iroq qiluvchiga tushdi yashirilishidan oldin (ya'ni hidden.bs.toast
voqea sodir bo'lishidan oldin) qaytadi. Agar siz ushbu usulni qo'lda ishlatsangiz, qo'ng'iroq qilishingiz autohide
kerak false
.
$('#element').toast('hide')
.toast('dispose')
Elementning tostini yashiradi. Tostingiz DOMda qoladi, lekin boshqa ko'rsatilmaydi.
$('#element').toast('dispose')
Voqealar
Tadbir turi | Tavsif |
---|---|
show.bs.tost | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. |
ko'rsatilgan.bs.tost | Ushbu hodisa tost foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi. |
yashir.bs.tost | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
yashirin.bs.tost | Ushbu hodisa tost foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})