Source

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 qiladiutil.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.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia 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: flexbizning 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Shaffof

Tostlar ham biroz shaffof, shuning uchun ular paydo bo'lishi mumkin bo'lgan narsaga aralashadi. CSS xususiyatini qo'llab-quvvatlaydigan brauzerlar uchun backdrop-filterbiz tost ostidagi elementlarni xiralashtirishga ham harakat 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">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</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">&times;</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">&times;</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.

Bootstrap 11 daqiqa oldin
Salom Dunyo! Bu tost xabari. 
<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">&times;</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">&times;</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">&times;</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="min-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">&times;</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-livemintaqada 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 qilish o'rniga, butun tushdi har doim yagona (atom) birlik sifatida e'lon qilinishini ta'minlash uchun kiriting (agar siz tushdi nonining faqat bir qismini yangilasangiz yoki bir xil tost tarkibini ko'rsatsangiz, muammolarga olib kelishi mumkin). keyinroq vaqt). 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 roleva darajani moslashtirishingiz kerak . aria-liveXato 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, odamlar tushdi o'qish uchun etarli vaqtga ega bo'lishini ta'minlash uchun delaykutish 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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.toastvoqea 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.toastvoqea sodir bo'lishidan oldin) qaytadi. Agar siz ushbu usulni qo'lda ishlatsangiz, qo'ng'iroq qilishingiz autohidekerak 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 showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.tost Ushbu hodisa tost foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi.
yashir.bs.tost Ushbu hodisa hidemisol 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...
})